将图像与文字对齐

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

感谢

来源

2010-02-08 Bilgehan

不要忘了复位风格（保证金/填充）：DIV，IMG，跨度{ 保证金：0;填充：0; border：0}
对于垂直对齐工作，您的元素必须内嵌。
纵向排列文字的典型选择是给出与容器等同的行高。

例如：

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

来源

2010-02-09 16:24:53 gromax

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

来源

2010-02-08 21:36:47 John

没有没有边框。此外，如果我删除图像或文本，div的高度是呈现18px，但如果我把它们两个，然后有一个1px的高度增加。 – Bilgehan 2010-02-08 21:42:21

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

<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-08 21:37:34 seventeen

将图像与文字对齐

回答

相关问题