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