Html 将图像与 <li> 中的文本垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18859201/
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 image with text within <li>
提问by Deja Vu
I'm trying to vertically align text with an image (or vice-versa?). Here's some code:
我正在尝试将文本与图像垂直对齐（反之亦然？）。这是一些代码：
<div class="row">
<div class="col-md-3">col-md-3
<ul>
<li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
</ul>
{# 3 more columns like this #}
</div>
also CSS:
还有CSS：
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
display: table-row;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
vertical-align: middle;
}
also, might be important all images are the same fixed size, let's say 60x60 like in example and I can notuse it as a background. How can I align it? Thanks.
此外，可能很重要的是所有图像都具有相同的固定大小，例如示例中的 60x60，我不能将其用作背景。我怎样才能对齐它？谢谢。
Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.
更新：正如所指出的，我正在寻找位于图片右边缘中间的文字，谢谢。
回答by avrahamcool
My solution works with one line of text as well as multiple lines.
我的解决方案适用于一行文本以及多行。
Working FiddleTested on:IE10, IE9, IE8, Chrome, FF, Safari
工作小提琴测试：IE10、IE9、IE8、Chrome、FF、Safari
HTML:same as you posted
HTML：与您发布的相同
I'm assuming you meant middle alignment. if not: use top| bottominstead of middle
我假设你的意思是中间对齐。如果不是：使用top| bottom代替middle
CSS
CSS
*
{
padding: 0;
margin: 0;
}
ul
{
list-style-type: none;
}
div ul li
{
margin: 5px;
}
img
{
vertical-align: middle; /* | top | bottom */
}
div ul li p
{
display: inline-block;
vertical-align: middle; /* | top | bottom */
}
回答by Pevara
I am not a big fan of using those table display options, had some bad cross-browser experiences with them.
我不喜欢使用这些表格显示选项，对它们有一些糟糕的跨浏览器体验。
Seems to me you could use line-height here. Something like this:
在我看来，您可以在这里使用 line-height。像这样的东西：
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
line-height: 60px;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
}
and a fiddle: http://jsfiddle.net/qjSpj/1/
和小提琴：http: //jsfiddle.net/qjSpj/1/
回答by Mohamad
You can use the vertical-align: top;declaration on the lielement. But you will need to use a clearfix since you're floating the image.
您可以vertical-align: top;在li元素上使用声明。但是您需要使用 clearfix，因为您正在浮动图像。
回答by Vlad
You can modify the <p>style from the default display to inline:
您可以将<p>样式从默认显示修改为内联：
p {display: inline}
回答by enapupe
Just remove the <p>tag and the float:leftfrom imgand you got it.
只需删除<p>标签和float:leftfromimg就可以了。
Demo at http://jsfiddle.net/BA2Lc/
回答by Juan from GT
I just added vertical-align:middle/top/bottom; to the images and worked.
我刚刚添加了 vertical-align:middle/top/bottom; 到图像和工作。
