Html 垂直对齐内联块列表项中的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7438775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align content in inline-block list items
提问by Steven
I'm trying to display an unordered list horizontally. In each list item, I have an anchor tag with an image, that I'd like to display vertically aligned in the list item. Here's my
我试图水平显示一个无序列表。在每个列表项中，我都有一个带有图像的锚标记，我想在列表项中垂直对齐显示该图像。这是我的
HTML:
HTML：
<ul>
<li>
<a href="#">
<img src="1.jpg" alt="" height="50" width="50" />
</a>
</li>
<li>
<a href="#">
<img src="2.jpg" alt="" height="50" width="50" />
</a>
</li>
<li>
<a href="#">
<img src="3.jpg" alt="" height="50" width="50" />
</a>
</li>
</ul>
CSS:
CSS：
ul
{
margin: 0;
padding: 0;
list-style: none;
height: 93px;
}
ul li
{
display: inline-block;
width: 110px;
height: 93px;
text-align: center;
vertical-align: middle;
}
What am I doing wrong here?
我在这里做错了什么？
回答by Joe
Try using display: table-cell;instead of display: inline-block;
尝试使用display: table-cell;代替display: inline-block;
回答by Kyle
Try floating the li's left. This will display them in a horizontal line and retain their block status
尝试浮动李的左边。这将在水平线上显示它们并保留它们的块状态
回答by Kyle
display:inline-block; treats element as if they inline level, which means any whitespace in your markup is displayed when the page is rendered.
显示：内联块；将元素视为内联级别，这意味着在呈现页面时会显示标记中的任何空白。
TRY:
尝试：
<ul><li>
<a href="#">
<img src="1.jpg" alt="" height="50" width="50" />
</a>
</li><li>
<a href="#">
<img src="2.jpg" alt="" height="50" width="50" />
</a>
</li><li>
<a href="#">
<img src="3.jpg" alt="" height="50" width="50" />
</a>
</li></ul>
OR:
或者：
<ul><!--
--><li>
<a href="#">
<img src="1.jpg" alt="" height="50" width="50" />
</a>
</li><!--
--><li>
<a href="#">
<img src="2.jpg" alt="" height="50" width="50" />
</a>
</li><!--
--><li>
<a href="#">
<img src="3.jpg" alt="" height="50" width="50" />
</a>
</li><!--
--></ul>
