Html 垂直对齐 img 和 li 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5021676/
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
vertical align img and text within li
提问by raklos
I am trying to vertically align to the middle both an image and some text within a list element but having no luck.
我试图将列表元素中的图像和一些文本垂直对齐到中间，但没有运气。
eg:
例如：
<ul>
<li><img src="somepath" /> sometext
</li>
<li><img src="somepath2" /> sometext2
</li>
</ul>
how can i do it? thanks
我该怎么做？谢谢
回答by Aron Rotteveel
Assuming your list items have a fixed height, you can use line-heightcombined with vertical-align: middleto do this.
假设您的列表项具有固定高度，您可以使用line-heightwithvertical-align: middle来执行此操作。
Example:
例子：
ul li {
display: block;
height: 100px;
line-height: 100px;
}
ul li img {
vertical-align: middle;
}
回答by Ben Jakuben
You should be able to use the CSS property "vertical-align" for the img tag. Example:
您应该能够为 img 标签使用 CSS 属性“vertical-align”。例子：
<style type="text/css">
img { vertical-align: middle; }
</style>
<ul>
<li><img src="test.jpg" />test</li>
</ul>
回答by naivists
If you know the height of the image (assuming it is an icon), you can set the line height to the height of the image.
Then it should work by setting vertical-align:middle. See a live example at w3schools: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align
如果你知道图片的高度（假设它是一个图标），你可以将行高设置为图片的高度。然后它应该通过设置来工作vertical-align:middle。在 w3schools 看到一个活生生的例子：http: //www.w3schools.com/Css/tryit.asp?filename =trycss_vertical-align
回答by Sergey Onishchenko
You should wrap text within "li"
您应该将文本包裹在“li”中
<li><div><span>My text</span></div></li>
li div{
display: table;
height: 100%;
width: 100%;
}
li span{
display: table-cell;
vertical-align: middle;
}
回答by Chrisau233
Following on from the above answers that suggest the line-height method for vertical centering. If you apply a font that has glyphs that aren't vertically centered in the font file then the result will be that your element won't be vertically centered either, but be positioned higher or lower than it should be.
继以上建议垂直居中的行高方法的答案之后。如果您应用的字体的字形未在字体文件中垂直居中，那么结果将是您的元素也不会垂直居中，而是比应有的位置高或低。
I had this issue and was tricky to work out. If your element doesn't vertically align correctly and you can't work out why, try applying a standard font such as 'Arial'.
我有这个问题，很难解决。如果您的元素没有正确垂直对齐并且您无法弄清楚原因，请尝试应用标准字体，例如“Arial”。
