圖像垂直對齊問題

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元素設置為block元素來處理此問題，但這僅在image是容器中唯一的元素時才有效。 我怎樣才能解決這個問題？

Answer 1

隨意的想法：

• 為什么用內聯塊，不應該像內聯一樣工作？
• x上可能有空白或填充嗎？ 您可以檢查Firebug嗎？
• “中間”對齊方式不是錯誤的嗎？ 假設您想將它們沿基線對齊，那豈不是“基線”嗎？
• 如果將兩個<a>標簽合並為一個怎么辦？

Answer 2

嘗試

#Header {
  vertical-align: middle;
}

注意我在嚴格標准模式下對此進行了測試。 它似乎對IE6沒有影響，但是將圖像在IE8和FF3上移了。

Answer 3

您不應該需要inline-block，這是圖像的默認顯示值，除非您已在級聯中將其重置為較高位置，這就是為什么它似乎無效的原因。

由於我看不到Firebug的演示頁面，因此我將猜測您的字體大小和行高有所不同。 嘗試為容器元素或標簽指定行高。 如果瀏覽器中的行高不同（它們可能很好），則“居中”和“居中”對齊將不同，而“基線”在理論上應在瀏覽器/字體大小/行中產生相同的結果高度。