-1

我想将 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 的原因是什么？

谢谢

4

3 回答 3

0

也许你在某个地方有一个边框，你需要摆脱或设置为零宽度？

于 2010-02-08T21:36:47.787 回答
0

我不完全确定我理解这里的问题，但如果它只是图像离你想要的位置只有几个像素，那么你为什么不只是相对地定位图像。例如：

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

于 2010-02-08T21:37:34.520 回答
0
  1. 不要忘记重置样式（边距/填充）：div、img、span { 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>
于 2010-02-09T16:24:53.007 回答