如何垂直居中 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>