建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯網營銷解決方案
IECSSBug系列：圖片上沒有l(wèi)ine-height垂直居中
圖片上沒有l(wèi)ine-height垂直居中
影響的IE版本
這個bug影響IE7, IE6
表現
使用line-height方法時圖片沒有垂直居中
教程編寫時間
2009.7.18 11:39:56
描述
這個bug殺死了我好多腦細胞。我常常在做“產品頁面”時，把很多的不同尺寸的圖放到相同尺寸的盒子里，使它們看上去更美觀。即使是我找到了這個bug的解決辦法之后，我依然痛恨它，因為我找到的僅有的解決辦法需要添加額外的標記元素。不管怎樣，我們來看一下示例。
示例（英文原文中查看）
HTML Code：
CSS Code：
- div {
- width: 150px;
- height: 155px;
- line-height: 155px;
- text-align: center;
- }
- img {
- vertical-align: middle;
- }
在IE8以下版本的IE中，瓢蟲的圖片沒有在垂直方向上居中。（嗨，起碼還顯示了好么?。?/p>
解決方案
以下是上述bug的解決方法（以類型排序）
解決方法 (干凈的標記方法)
該方法的時間
2009.7.18 11:52:58
可修復的的版本
所有受該bug影響的版本
描述
我得說明，既然這個解決方法被標記為“干凈的標記方法”，如果你支持的最低IE版本為7，那么僅需在div中添加空格。（也就是說，元素只在IE7以下版本的中需要）
示例（英文原文中查看）
HTML Code：
CSS Code：
- div {
- width: 150px;
- height: 155px;
- line-height: 155px;
- border: 1px solid #000;
- background: #f00;
- text-align: center;
- }
- img {
- vertical-align: middle;
- }
- span {
- display: inline-block;
- }
注意我們添加了一個額外的span從而在7以下版本的IE中修復該bug；我們還將display屬性設置為inline-block來使我們關鍵的span擁有“l(fā)ayout”。最后結果：一切都正常了。
文章名稱：IECSSBug系列：圖片上沒有l(wèi)ine-height垂直居中
本文網址：http://www.5511xx.com/article/ccdcjho.html
