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