HTMLツールバーのボタンの配置

Question

私の開発したウェブサイトのナビゲーションバーにロゴがあります。ロゴを追加すると、テキストは垂直に配置されませんが、ロゴを削除すると中央に位置する。ロゴなし

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.logohead { 
 
    display: inline-block; 
 
} 
 
.links { 
 
    color: white; 
 
    transition: all .1s ease-in; 
 
    font-family: 'Roboto', sans-serif; 
 
    padding: .8em; 
 
    display: inline-block; 
 
    margin-left: 2%; 
 
} 
 
.links:hover { 
 
    color: lightgray; 
 
} 
 
.navgation { 
 
    display: inline-block; 
 
    background-color: #33414a; 
 
    width: 100%; 
 
    padding: .8em; 
 
}

<ul class="navgation"> 
 
    <li class="links" id="lgo"> 
 
    <img class="logohead" src="nl.png"> 
 
    </li> 
 
    <li class="links"> 
 
    Hello World 
 
    </li> 
 
    <li class="links"> 
 
    Hello World2 
 
    </li> 
 
</ul>

：

ここでこれを実行する方法はたくさんありますFiddle

Answer 1

です。

.navigation{ 
    display: flex; 
    align-items: center; 
} 

ライブデモ：https://jsfiddle.net/j2ahjd8w/6/

もっとソリューションここに：https://css-tricks.com/centering-css-complete-guide/

Answer 2

ただ、そうのように、.linksにvertical-align: middle;を追加します。

.links { 
    color: white; 
    vertical-align: middle; 
    transition: all .1s ease-in; 
    font-family: 'Roboto', sans-serif; 
    padding: .8em; 
    display: inline-block; 
    margin-left: 2%; 
    vertical-align: middle; 
} 

私が試した一つの解決策は、フレキシボックスを使用していますそれは提供されたフィドルでそれは働いた。

Answer 3

なぜflexBoxを使用しませんでしたか？

.navgation { 
    display: flex; 
    align-items: center; 
    background-color: #33414a; 
    width: 100%; 
    padding: .8em; 
}