将图像与文本对齐答案

【问题标题】：aligning images with text将图像与文本对齐
【发布时间】：2011-01-14 13:30:47
【问题描述】：

我想将 18 像素高度的图像与旁边的文本居中对齐。这是我使用的代码：

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

使用该代码，div 容器以 19 像素而不是 18 像素的高度呈现，并且文本不以图像为中心。我试过 Safari 4 和 Firefox 3.6。那 1 px 的原因是什么？

谢谢

【问题讨论】：

标签： vertical-alignment css

【解决方案1】：

别忘了重置样式（边距/填充）：div，img，span { 边距：0；填充：0；边框：0 }
要使垂直对齐工作，您的元素必须内联。
对齐文本的经典选择垂直是给出一个行高等于容器。

例如：

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>

【讨论】：

【解决方案2】：

我不完全确定我是否理解这里的问题，但如果只是图像与您希望的位置相差几个像素，那么您为什么不只是相对定位图像。例如：

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

这会将图像从原来的位置向上移动 2px。

【讨论】：

【解决方案3】：

也许你在某处有一个边框需要去掉或设置为零宽度？

【讨论】：

不，没有边框。此外，如果我删除图像或文本，则 div 的高度将呈现 18px，但如果我将它们都放入，则高度会增加 1px。