圖像垂直對齊的CSS - 奇怪

我有以下代碼：圖像垂直對齊的CSS - 奇怪

<html> 
<head> 
<style type="text/css"> 
#test img {vertical-align: middle;} 


div#test { 
border: 1px solid green; 
height: 150px; 
line-height: 150px; 
text-align: center; 
color: white 
} 
</style> 
</head> 

<body> 

<div id="test">t<img class="bottom" src="http://www.w3schools.com/css/w3schools_logo.gif" alt="W3Schools" width="270" height="50" /></div> 
</body> 
</html>

如果刪除了噸的圖像之後，則它不能在中心垂直對齊（I在測試它火狐）。因爲它現在是對齊的，所以我可以將文本的顏色更改爲與背景相同，或者另一種方法是放置內聯樣式並將其設置爲背景。

是否有任何其他方式垂直對齊圖像與CSS？我發現這些方法有點破解。這將如何在CSS3中工作？

來源

2010-09-26 JohnDel

這是否有文檔類型？ – 2010-09-26 19:40:16

這是我創建的一個演示快，我有一個真正的網站，我試過它，它具有doctype爲HTML過渡和它具有相同的行爲。 – JohnDel 2010-09-26 19:56:29

t造成差異的原因是因爲如果圖像是唯一元素，或者它們是文本的一部分，則圖像被區別對待。

如何將圖像視爲單個元素取決於頁面的呈現模式。在開始時，作爲單個元素的圖像被視爲塊元素，並且該行爲被保留在某些場合以向後兼容。您應該在頁面上放置一個proper doctype，這樣它就不會以怪癖模式呈現，如果它不能解決您的問題，至少會使其表現得更加一致。

來源

2010-09-26 19:53:18 Guffa

事實上，使用html過渡它不起作用，但與doctype嚴格工作沒有字母t。謝謝，儘管這意味着我不能使用doctype transitional來將垂直圖像與CSS對齊... – JohnDel 2010-09-26 20:07:37

而不是t字符使用 它是一個空格。

但我不知道爲什麼會發生這種情況。任何建議傢伙？

來源

2010-09-26 19:46:53

我覺得你的問題是一個錯誤的元素上應用vertical-align屬性 - 它應該被應用到IMG的周邊元素，那就是你的情況div#test：

div#test { 
border: 1px solid green; 
height: 150px; 
line-height: 150px; 
text-align: center; 
color: white 
vertical-align: middle; 
}

我不知道爲什麼它與t符號一起使用，也許是瀏覽器的怪癖？

來源

2010-09-26 19:46:56

此外，這並不適用於對齊在div內的圖像。它適用於在給定的「line-height」內的實際行中對齊它......與它將對齊div的實際文本和其他適用的內聯元素相同。如果這是div中唯一的東西，那麼只有一行，所以你可能會得到你正在尋找的結果...但是如果你將div的高度設置爲高於一行的高度，你將獲得你想要的結果。 – prodigitalson 2010-09-26 19:52:16

我嘗試了垂直對齊的每種可能的組合，但當我刪除t時它不起作用。我想知道如何在CSS3中做到這一點正確的方式。 – JohnDel 2010-09-26 19:59:23

圖像垂直對齊的CSS - 奇怪

回答

相關問題