将图像与文本对齐

Question

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

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

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

由于

Answer 1

也许你在那里有一个边界需要摆脱或设置为零宽度？

Answer 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。

Answer 3

1. 不要忘记重置样式 （margin / padding）：div，img，span { 余量：0;填充：0; border：0}
2. 垂直对齐工作，你的 元素必须我内联。
3. 对齐文字的经典选择 垂直是给出一个行高 等于容器。

例如：

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