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;
