CSS, CSS2, 網頁設計

CSS教學-DIV內的物件垂直水平置中

梅干2010/05/03
梅問題-CSS教學-垂直水平置中
  之前梅干曾分享過,讓Div區塊中的元件垂直水平居中,雖然也可以作到像table一樣,但說實話看到那一層包過一層的,看到連梅干自已也昏了,所以也不是很愛用,因此每當要垂直水平居中時,就是利用table方式來製作,但最近梅干發現一個簡單的好方法,不用再像之前包的像肉棕一樣,就可以完成區塊中的物件垂直水平居中,且在梅干的測試下,還可適用於各家瀏覽器,真的是太方便了。

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;}

Html設定:
<div class="div_table-cell"><span></span><img src="img01.jpg" width="350" height="233" /></div>
<div class="div_table-cell"><span></span><img src="img02.jpg" width="350" height="233" /></div>

 其實這個方法就是把Div顯示區塊設為表格,如此一來就像在使用table標籤一樣,另外在div中會再包一個空span,主要是為了讓IE6把它當成是個單行區塊,如此一來IE6也可居中,這方法比之前的簡單許多。
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼