圖像垂直對齊問題

我有一個圖像需要與某些文本垂直對齊。圖像沒有邊框，沒有間距，並且已經被正確裁剪。但是，它在IE和Firefox中的排列方式不同，我無法弄清楚原因。圖像垂直對齊問題

對齊在IE：

alt text

對齊在FF：

alt text

通知如何在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; 
}

我已經通過使圖像元素的塊級元素處理這在過去，但僅當圖像是容器中的唯一元素時才起作用。我怎樣才能解決這個問題？

來源

2009-11-30 Chris

圖像可以是標題div上的背景圖像嗎？如果是這樣，你可以有背景位置：中心; – Zoidberg 2009-11-30 19:19:10

我只是因爲問題而失去了3個小時的生活。謝謝。 – Marcelo 2011-03-04 18:25:50

隨想：

爲什麼inline-block的，不應該這項工作作爲內聯？
x上可能有一些邊距或填充？你可以檢查Firebug嗎？
是不是「中」錯誤的方法來對齊它？假設你想要沿着基線對齊它們，它不應該是「基線」嗎？
如果將兩個<a>標籤合併爲一個，會發生什麼情況？

來源

2009-11-30 19:26:10

內聯塊是一個嘗試修復，沒有效果。 Firebug報告沒有保證金/填充。我真的希望它中間對齊。我指出基準是對差異的說明。當我將兩者合併成一個標籤時什麼都沒有發生。 – Chris 2009-11-30 19:48:30

這很奇怪。如果你使用老式的「align ='absmiddle'」來查看它是否會帶來任何改變，你能嘗試一下會發生什麼嗎？ – 2009-11-30 19:50:57

嘗試

#Header { 
    vertical-align: middle; 
}

注意我在嚴格標準模式下測試這一點。它似乎對IE6沒有影響，但在IE8和FF3上移動了圖像。

來源

2009-11-30 20:31:37

你不應該需要內聯塊，這是一個圖像的默認顯示值，除非你已經在級聯中將它重置得更高，這就是爲什麼它看起來沒有效果。

因爲我無法看到Firebug的演示頁面，所以我會猜測你的字體大小，因此行高是不同的。嘗試爲容器元素或a標籤指定一個行高。如果瀏覽器中的線條高度不同（它們可能很好），則「中間」和頂部對齊將會不同，而「基線」理論上應該在瀏覽器/字體大小/高度。

來源

2009-11-30 21:53:01 prodigitalson

圖像垂直對齊問題

回答

相關問題