回首頁 csscss div垂直置中
2009
12/22

css div垂直置中

瀏覽:13,347人次
作者:英創達

IE6及IE7,IE8的垂直置中

假設一個寬高皆為500px的div區塊,裡面放著一張圖片
這時需要將它水平及垂直置中

html原始碼為

<div><span></span><img src="pic.jpg" /></div>

CSS碼為

div{ width:500px; height:500px; background-color:#CCCCCC;
display:table-cell; text-align:center; vertical-align:middle; }
div span{ height:100%; display:inline-block; }
div *{ vertical-align:middle;}

在<img>前方加上<span></span>
再將span屬性加上 height:100%; display:inline-block;
而[div *]意思是div以內的”所有東西”,再加上 vertical-align:middle;

VN:F [1.9.6_1107]
Rating: 8.7/10 (6 votes cast)
VN:F [1.9.6_1107]
Rating: 0 (from 0 votes)
css div垂直置中, 8.7 out of 10 based on 6 ratings

留下您的意見

(若看不到驗證碼,請重新整理網頁。)