CSS定高多行垂直居中

Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。

DOM标准中

 

IE

 

综合

#boxOuter
{
    display
:table;
    height
:300px;
    width
:500px;
    border
:solid 1px black;
    *position
:relative;
}
#box
{
    display
:table-cell;
    vertical-align
:middle;
    *position
:absolute;
    top
:50%;
    width
:100%;
}
#boxInner
{
    *position
:relative;
    width
:100%;
    top
:-50%;
}

 

<div id="boxOuter">
    
<div id="box">
        
<div id="boxInner">
            
<p>Some Content Here</p>
            
<p>Some Content Here</p>
            
<p>Some Content Here</p>
            
<p>Some Content Here</p>
            
<p>Some Content Here</p>
        
</div>
    
</div>
</div>
posted @ 2008-09-29 18:42 LongWay 阅读(96) 评论(0)  编辑 收藏 网摘 所属分类: CSS

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索



相关文章:


相关搜索:
CSS 定高 垂直居中

相关链接: