将图像与文本对齐

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。那1px的原因是什么？

谢谢

Answer 1

1. 不要忘记重置样式（保证金/填充）：div，img，跨度{margin：0;填充：0；边框：0 }
2. 为了垂直对齐，您的元素 必须 我内联。
3. 垂直对齐文本的经典选择是给出与容器相等的线高。

例如 ：

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

Answer 2

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

Answer 3

我不能完全肯定我理解的问题是什么在这里，但如果它只是图像是从那里，你想它是几个像素，那么你为什么不只是定位图像比较。例如：

<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的它最初是其中上移。