您的位置:首页 > 其它

实现div垂直居中的display:table-cell方法示例介绍

2014-07-24 15:35 519 查看
ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!)
ie8以及以后版本可以识别!

ie7和ie6能识别vertical-align:middle;

如果盒模型中间只有几段文字的话,设置line-height就可以实现居中显示了!

如果要实现盒模型中的div居中,可以参考以下代码:

div#wrap {    
    display: table;    
    border: 1px solid #FF0099;    
    background-color: #FFCCFF;    
    width: 760px;    
    height: 400px;    
    *position: relative;    
    overflow: hidden;    
    }    
      
    div#subwrap {    
    vertical-align: middle;    
    display: table-cell;    
    *position: absolute;    
    *top: 50%;    
    }    
      
    div#content {    
    *position: relative;    
    *top: -50%;    
    }

效果:




这个是多浏览器兼容的,但是得写几层div~ 但是想在层或img在层中垂直水平居中该怎样做呢?下一篇会涉及到。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: