Html 如何在一条线上垂直居中图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3047877/
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
How to Vertically Center Images on a Line?
提问by Jeremy Kauffman
What's the best way to center icons on a line when the images are smaller than the line height?
当图像小于行高时，将图标居中的最佳方法是什么？
For example (styles inline for easier reading):
例如（样式内联以便于阅读）：
<div style="line-height: 20px">
<img style="width: 12px; height: 12px;"/>
Blah blah blah
</div>
Here's a jsFiddle example. This example also shows why vertical-align: middledoes not work.
这是一个 jsFiddle 示例。这个例子也说明了为什么vertical-align: middle不起作用。
I want the img to be centered against the text of the div. That is, even if the text wrapped to multiple lines, the image would be centered against a single line. Ideally, the solution would not involve setting margings/paddings on the image and would work even if I didn't know the line-height.
我希望 img 以 div 的文本为中心。也就是说，即使文本换行到多行，图像也会以单行为中心。理想情况下，该解决方案不涉及在图像上设置边距/填充，即使我不知道行高也能工作。
Things I've read:
我读过的东西：
How do I vertically align text next to an image with CSS?(deals with case where image is larger, doesn't seem to apply here)
如何使用 CSS 垂直对齐图像旁边的文本？（处理图像较大的情况，此处似乎不适用）
回答by P?r Wieslander
The cause of your problem is that the image is vertically centered relative to the x-heightof the surrounding text. This can be seen quite clearly on an enlarged screenshot where the baselineand mean lineof the surrounding text is included:
问题的原因是图像相对于周围文本的x 高度垂直居中。这可以很清楚地看到的，其中的放大屏幕截图基线和平均线周围的文本被包括：
The image is aligned similarly no matter which font size or line height you use. So, in a typographical sense, the image is actually correctly vertically aligned. However, if you'd like to adjust the alignment so that the center of the image is closer to the mean line, simply move it a bit upwards using margin-bottom:
无论您使用哪种字体大小或行高，图像的对齐方式都是相似的。因此，在印刷意义上，图像实际上是正确垂直对齐的。但是，如果您想调整对齐方式以使图像的中心更接近平均线，只需使用margin-bottom以下命令将其向上移动一点：
img.icon {
margin-bottom: 0.25em;
}
The value of 0.25 em is rather arbitrarily chosen, based on what looked good when I tried it out. Adjust freely according to taste.
0.25 em 的值是随意选择的，基于我尝试时看起来不错的结果。根据口味自由调整。
Here is a comparison before and after the margin-adjustment, with different font sizes.
这是margin-adjustment 前后对比，字体大小不同。
回答by Nik Chankov
Why don't you set the image as background of the div element? I.e.:
为什么不将图像设置为 div 元素的背景？IE：
<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
Blah blah blah
</div>
This will position the image on the top left. At least that's how I would do.
这会将图像定位在左上角。至少我会这样做。
Regards
问候
回答by vtambourine
Try to make parents container display: tableand display: table-cell. After that vertical-align: middleshould work in "table way".
尝试使父母容器display: table和display: table-cell. 之后vertical-align: middle应该以“表格方式”工作。
