(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26)
CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中。
IE6,IE7,FF3测试通过
CSS* { margin:0; padding:0; list-style:none;}
#vertical_box {
100%;
display:table;
border:1px red solid;
height:400px;
/*针对IE的hack*/ *position:relative;
}
#vertical_box_sub {
display: table-cell;
vertical-align: middle;
/*针对IE的hack*/ *position:absolute; *top:50%;
}
#vertical_box_container {
font-family:"宋体";
border:1px green solid;
/*针对IE的hack*/ *position:relative; *top:-50%;
margin:0 auto; 200px;
}
HTML
<div id="vertical_box">
<div id="vertical_box_sub">
<div id="vertical_box_container">
<p>我是居中的文字</p>
<p>我居中</p>
<p>你也居中</p>
<img src="" border=0 alt="" title="">
</div>
</div></div>