图像垂直对齐问题

Posted 2023-03-06

【中文标题】图像垂直对齐问题

【英文标题】：image vertical alignment issue

【发布时间】：2010-12-21 18:16:34

【问题描述】：

我有一张想要与一些文本垂直对齐的图像。图像没有边框，没有间距，并且已正确裁剪。但是，它在 IE 和 Firefox 中的对齐方式不同，我不知道为什么。

在 IE 中对齐：

FF 中的对齐方式：

请注意，在 FF 中，X 框与文本底部齐平。我使用的 html 是：

<div id="Header">
    <a href="#" onclick="return false;">Close</a>
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif"  style="border-width:0px;" /></a>
</div>            

样式表的相关部分如下所示：

#Header img

    vertical-align: middle;
    display: inline-block;

我过去通过将图像元素设置为块元素来处理此问题，但仅当图像是容器中的唯一元素时才有效。我该如何解决这个问题？

【问题讨论】：

图片可以是header div上的背景图片吗？如果是这样，那么您可以拥有 background-position:center center;

我刚刚因问题失去了 3 个小时的生命。谢谢。

【参考方案1】：

随意的想法：

为什么是内联块，这不应该作为内联工作吗？ x 上是否有一些边距或填充？你能用 Firebug 确认一下吗？ “中间”不是错误的对齐方式吗？假设您想将它们沿基线对齐，不应该是“基线”吗？ 如果将两个<a> 标签合并为一个会怎样？

【讨论】：

Inline-block 是一个没有效果的尝试修复。 Firebug 报告没有边距/填充。我实际上希望它中间对齐。我指出了基线作为差异的说明。当我将两者合并为一个标签时，什么也没有发生。

这很奇怪。你能试试如果你用老式的“align='absmiddle'”来看看会不会带来什么变化吗？

【参考方案2】：

试试

#Header 
  vertical-align: middle;

注意，我在严格标准模式下对此进行了测试。它似乎对 IE6 没有影响，但在 IE8 和 FF3 上移动了图像。

【参考方案3】：

你不应该需要内联块，这是图像的默认显示值，除非你在级联中将它重置得更高，这就是它似乎没有效果的原因。

由于我看不到 Firebug 的演示页面，我会猜测您的字体大小，因此行高是不同的。尝试为容器元素或 a 标签指定行高。如果浏览器中的行高不同（它们很可能），那么您要对齐的“中间”和顶部将会不同，而“基线”理论上应该跨浏览器/字体大小/行产生相同的结果-高度。