将图像与文本对齐
我想将 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的原因是什么？
谢谢
i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
（边距/填充）：div、img、span {
保证金：0；填充：0； border:0 }
元素必须内联。
垂直是给出行高
等于容器。
例如 ：
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
elements must me inline.
vertically is to give a line-height
equal to container.
For example :
也许您在某处有一个边框，需要去掉或设置为零宽度？
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
我不完全确定我明白问题所在，但如果只是图像距离您想要的位置有几个像素，那么为什么不相对地定位图像。例如：
这会将图像从原来的位置向上移动 2px。
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
this will shift the image up by 2px from where it originally was.