如何垂直居中 li 導航菜單但將其水平對齊到右側，同時保持徽標圖標水平對齊左和 ctrd vert？

Question

以上是所需的結果 - 但導航欄移動到頁面右側。

這里是現有的 css 和 html。 目標再次是

1. 使徽標圖像垂直居中並水平位於頁面左側
2. 獲取頁面最右側的導航欄並垂直居中
3. 將 HR 放在圖像和導航欄下方

先感謝您！

<div class="nav"> 
  <ul>
    <li><img src="Images/logo.jpg"></li>
    <li><a class="link" href="#">Contact</a></li>
    <li><a class="link" href="#">Qual...</a></li>
    <li><a class="link" href="#">Home</a></li>
  </ul>
  <hr class="hr">     
</div>

 .nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;    
}

Answer 1

你想對齊垂直 li 孩子所以使用 display flex 並給第一個元素 li flex-grow 以在中間占據空白你可以使用網格，有關網格的更多信息在這里

 .nav li { margin:0 10px; }.nav>ul{ list-style: none; display:flex; align-items:center; padding:0; }.nav li:first-child{ flex-grow:1; }

 <div class="nav"> <ul> <li><img src="https://picsum.photos/200"></li> <li><a class="link" href="#">Contact </a></li> <li><a class="link" href="#">Qual... </a></li> <li><a class="link" href="#">Home</a></li> </ul> <hr class="hr"> </div>

Answer 2

 .nav ul { list-style-type: none; margin: 0; padding: 0; }.nav ul li { float: right; line-height: 100px; padding: 0 20px; }.nav ul li:first-child { float: left; width: 100px; height: 100px; background-color: red; }.nav ul:after { content:""; display: block; clear: both }

 <div class="nav"> <ul> <li>LOGO</li> <li><a class="link" href="#">Contact</a></li> <li><a class="link" href="#">Qual...</a></li> <li><a class="link" href="#">Home</a></li> </ul> <hr class="hr"> </div>