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也可居中,這方法比之前的簡單許多。
[範例預覽] [範例下載]