CSS实现未知高度图文混合垂直居中

标签：

（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期 2014-06-26）

CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中。

IE6,IE7,FF3测试通过

CSS* { margin:0; padding:0; list-style:none;}

#vertical_box { 

    width: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; width: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>

CSS实现未知高度图文混合垂直居中

标签：

原文地址：http://www.cnblogs.com/ferron/p/4529977.html