CSS CSS2

[CSS]讓div內的物件垂直、水平居中

2008/11/22

  使用過div的人都知道,當要將div內的物件垂直居中是一件不可能的任務,但用table便可輕鬆的作到,但為了專業的堅持,要怎麼才能讓div內的物件居中呢?還真讓梅干桑一夕間白了頭髮。


CSS語法:
[css]div { 
width:300px;
height:300px;
border:1px solid #c00;
position:relative; /*to IE*/
display:table-cell;
text-align:center;
 
vertical-align:middle; /*to firefox*/
}
div p {
position:static !important;
position:absolute;
top:50%; /*讓IE上空出50%*/ 
border: 1px solid #CCCCCC;
}
div p img {/*讓img在div中居中*/
position:static !important;
position:relative;  
top:-50%;/*IE向上-50%*/ 
left:-50%;/*IE向左-50%*/ 
border: 2px solid #0099CC;
}
div p span {/*讓文字在div中居中*/ 
position:static !important;
position:relative;  
top:-50%; /*IE向上-50%*/
left:-50%;/*IE向左-50%*/ 
border: 2px solid #0099CC;
}
[/css]
<body>….</body>之間:
[html]
<!–圖片垂直居中 –>
<div>
<img src="888.gif">
</div>
<!–文字垂直居中 –>
<div>
<span>文字垂直居中</span>
</div>
[/html]
[範例預覽]