close

這個方法就是把Div顯示區塊設為表格,如此一來就像在使用table標籤一樣,另外在div中會再包一個空span,主要是為了讓IE6把它當成是個單行區塊,如此一來IE6也可居中,這方法比之前的簡單許多。

 1.jpg   2.jpg

 


 

CODE CSS :

<style type="text/css">
.div_table-cell{
	width:450px; 
	height:500px;	
	background-color:#333; 
	display:table-cell; 
	text-align:center; 
	vertical-align:middle;
	border:solid 2px #fff;	
	}
 
/* IE6 hack */
.div_table-cell span{
	height:100%; 
	display:inline-block;
	}
 
/* 讓table-cell下的所有元素都居中 */
.div_table-cell *{ vertical-align:middle;}

 


 

CODE HTML :

<div><span></span><img src="img01.jpg" width="350" height="233" /></div>
<div><span></span><img src="img02.jpg" width="350" height="233" /></div>

arrow
arrow
    全站熱搜

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()