Question

我正试图在li标签中垂直对齐我的图像。

我有类似的东西。

<nav id='tabs-wrapper'>
  <ul id='tabs'>
    <li><a href='index.html'><img id='btn' 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='test2.html'>Test</a></li><img class='vert' src='images/vert2.png'/>
    <li><a href='#'>contact</a></li><img class='vert' src='images/vert2.png'/>
  </ul>

CSS

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

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

nav #tabs li{
    display: inline-block;
    height: 42px;
    padding-right:15px;
    padding-left:15px;
}

#tabs li:hover{
    border-bottom:1px solid blue;
    line-height:30px;
}

#tabs li a{
   margin: 0 10px;
   line-height: 48px;
   vertical-align: middle;
}

#btn{
line-height: 48px;
vertical-align: middle;
}

出于某种原因，第一个li（包含图像）似乎不能垂直对齐到中间（其余的li工作正常）。

任何人都可以帮助我吗？

感谢。

Answer 1

在无序列表中，<li>以外的任何内容都是无效的HTML（如下面的###所示）。

<li><a href='index.html'><img id='btn' src='images/home.png'/></a></li>###<img class='vert'              
         src='images/vert2.png'/>###

如果此图像是UI的一部分，则它属于CSS背景，而不是内嵌图像。

使用：

#tabs a {
     display:block;
     background:url(images/vert2.png);
     background-repeat:no-repeat;
     background-position:0px 0px;
     padding-left:30px; 
}

调整填充和背景位置以适合您的布局。

如何垂直对齐li内的图像

1 个答案: