图像垂直对齐问题

Question

我有一个想要与某些文字垂直对齐的图像。图像没有边框，没有间距，并且已正确裁剪。但是，它在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" alt="Close" style="border-width:0px;" /></a>
</div>            

样式表的相关部分如下：

#Header img
{
    vertical-align: middle;
    display: inline-block;
}

我过去通过将image元素设置为块元素来处理这个问题，但只有在图像是容器中唯一的元素时才能使用。我该如何解决这个问题？

Answer 1

随机想法：

• 为什么内联块，这不应该像内联一样工作吗？
• x上会有一些边距或填充吗？你可以查看Firebug吗？
• 不是“中间”错误的对齐方式吗？假设你想沿着基线对齐它们，它不应该是“基线”吗？
• 如果将两个<a>标记合并为一个，该怎么办？

Answer 2

尝试

#Header {
  vertical-align: middle;
}

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

Answer 3

您不需要内联块，这是图像的默认显示值，除非您在级联中将其重置得更高，这就是为什么它似乎没有效果。

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