手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >实现div垂直居中的display:table-cell方法示例介绍
实现div垂直居中的display:table-cell方法示例介绍
摘要:ie7和ie6都不能识别display:table-cell;(但是支持display:block等css1的属性!)ie8以及以后版本可以...

 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%;

}

效果:

1

这个是多浏览器兼容的,但是得写几层div~ 但是想在层或img在层

【实现div垂直居中的display:table-cell方法示例介绍】相关文章:

ul里面如何让li居中不用FLAOT改为display:inline可实现

DIV+CSS创建三栏网页布局方法介绍

CSS3实现的闪烁跳跃进度条示例

使用CSS代码的空格实现中文对齐的方法

css实现文字过长显示省略号的方法

div标签中的元素margin-top失效的解决方法

IE6定义1px左右高度的容器示例代码

DIV垂直居中的办法

用CSS实现垂直居中的3种方法

任意图片实现垂直居中的三种方法(兼容性还不错)

精品推荐
分类导航