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>将垂直居中于彼此。

Answer 2

将图像包裹在Div中，然后应用style =“margin-top：auto; margin-bottom：auto;”

如何在ul中垂直对齐图像

2 个答案: