使层垂直居中的display:table-cell方法,多浏览器兼容

本秂侑毒 提交于 2019-12-02 16:19:07

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在层中垂直水平居中该怎样做呢?下一篇会涉及到。。。。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!