WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

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

更新时间:2014-07-28 15:10 作者:佚名点击:
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在层中垂直水平居中该怎样做呢?下一篇会涉及到。
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容