html - 如何在ul中垂直对齐图像

Question

我正在尝试对我的 ul 元素进行垂直对齐

我有类似的东西

<ul id='menu'>
       <li><a href='index.html'><img class='vert' src='images/home.png' /></a>
      </li><img class='vert' src='images/vert2.png'/><li><a href='#'>project</a></li>
      <img class='vert' src='images/vert2.png'/>
      <li><a href='test.html'>test</a></li>
      <img class='vert' src='images/vert2.png'/>
     <li><a href='#'>Contact</a></li>
     <img class='vert' src='images/vert2.png'/>
     <li><a href='#'>Numbers</a></li><img class='vert' src='images/vert2.png'/>
 </ul>

我的CSS

nav #menu{
  float: left;
  height: 46px;
}

nav #menu .vert{
    vertical-align: middle;
}

nav #menu li{
    display: inline-block;
    line-height: 45px;
    vertical-align: middle;
    height: 42px;
    border-bottom:4px solid black;
    padding-right:15px;
    padding-left:15px;
}

nav #menu li a{
   color: white;
   letter-spacing: 1px;
   font:normal 1.1em proxima-reg;
   margin: 0 10px;
   line-height: 46px;
   vertical-align: middle;
}

第一个按钮是图像，其余是文本。我能够将文本对齐到中间，但我不确定如何将我的图像垂直对齐到 middd。当前图像与顶部对齐。

谁能帮我解决这个问题？非常感谢!

Answer 1

图像不应该是 ul 的直接子级。

制作<li> , 不是 float但是display:inline-block与 vertical-align:middle , 并将图像包装在 <li> 中以及拥有正确的代码。

全部<li>将彼此垂直居中。