Nav-Barをロゴの中心に合わせる（画像）

Question

UIKitを使って少しテストしたウェブサイトを作成しました。ここでは、あらかじめ作成されたフレームワークを使用せずにデザインを試してみたかったのです。私はナビゲーションバーに問題があります。

これは、UIKitで作成されたオリジナルのナビゲーションバーです。テキストがロゴの真ん中にどのように垂直に配置されているかをご覧ください。

あなたはテキストを画像と同じ行にあるが、それは画像（ロゴ）の上端と整列している見ることができるようにこれは、私が作成しようとしていますナビゲーションバーである第二の画像であり、

私は最初のイメージのように2番目のイメージを作成しようとしています。テキストはロゴの中央に揃えられています。私は「縦に並んだ：中」を試みました。私のCSSでは、それは動作していないようです...任意のアイデア？事前に

html { 
 
    font-family: monospace; 
 
    font-size: 12pt; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background-color: honeydew; 
 
} 
 

 
nav .ul { 
 
    list-style-type: none; 
 
    display: table; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<header> 
 
    <div class="row"> 
 
    <nav> 
 
     <ul class="column small-hidden large-12"> 
 
     <li class="column small-hidden large-3">&nbsp;</li> 
 
     <li class="column small-hidden large-1">Yep</li> 
 
     <li class="column small-hidden large-1">Yep</li> 
 
     <li style="float: center;" class="column small-hidden large-1 logo"><img alt="Website Logo" src="img/image.png"></li> 
 
     <li class="column small-hidden large-1">Yep</li> 
 
     <li class="column small-hidden large-1">Yep</li> 
 
     <li class="column small-hidden large-3">&nbsp;</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

ありがとう：

は、ここに私のコードです！

Answer 1

あなたはこれを試すことができます。

nav li.img{ vertical-align: middle;}