DIV CSS 佈局教程網

圖片上沒有line-height垂直居中

影響的IE版本

這個bug影響IE7, IE6

表現

使用line-height方法時圖片沒有垂直居中

教程編寫時間

2009.7.18 11:39:56

描述

這個bug殺死了我好多腦細胞。我常常在做“產品頁面”時，把很多的不同尺寸的圖放到相同尺寸的盒子裡，使它們看上去更美觀。即使是我找到了這個bug的解決辦法之後，我依然痛恨它，因為我找到的僅有的解決辦法需要添加額外的標記元素。不管怎樣，我們來看一下示例。

示例（英文原文中查看）

HTML Code：

1. <div><img src="hl_logo.png" alt="" width="95" height="115"></div> 
2.   

3. <!-- NOTE: no white-space in the <div> also triggers bug in IE7 --> 

CSS Code：

1. div { 
2.     width: 150px; 
3.     height: 155px; 
4.     line-height: 155px; 
5.     text-align: center; 
6. } 
7. img { 
8.     vertical-align: middle; 

9. } 

在IE8以下版本的IE中，瓢蟲的圖片沒有在垂直方向上居中。（嗨，起碼還顯示了好麼！）

解決方案

以下是上述bug的解決方法（以類型排序）

解決方法 (干淨的標記方法)

該方法的時間

2009.7.18 11:52:58

可修復的的版本

所有受該bug影響的版本

描述

我得說明，既然這個解決方法被標記為“干淨的標記方法”，如果你支持的最低IE版本為7，那麼僅需在div中添加空格。（也就是說，<span>元素只在IE7以下版本的中需要）

示例（英文原文中查看）

HTML Code：

1. <div> 
2.     <img src="hl_logo.png" alt="" width="95" height="115"> 

3.     <span></span> 
4. </div> 
5.   
6. <!-- NOTE: <span> is not needed for IE7; whitespace is enough --> 

CSS Code：

1. div { 
2.     width: 150px; 
3.     height: 155px; 
4.     line-height: 155px; 

5.     border: 1px solid #000; 
6.     background: #f00; 
7.     text-align: center; 
8. } 
9. img { 
10.     vertical-align: middle; 
11. } 
12. span { 
13.     display: inline-block; 
14. } 

注意我們添加了一個額外的span從而在7以下版本的IE中修復該bug；我們還將display屬性設置為inline-block來使我們關鍵的span擁有“layout

”。最後結果：一切都正常了。

原文鏈接： haslayout   翻譯： 伯樂在線 - nighca

譯文鏈接： http://blog.jobbole.com/49703/