-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 回答