div内水平垂直居中


查找相关文章:css

在div高度确定的情况下,div内的元素水平垂直居中

.creative-img-box {
display: table-cell;
width: 180px;
height: 120px;
text-align: center;
vertical-align: middle;
}

关键在这里 display: table-cell;然而ie6/ie7不支持table-cell,这里有个解决办法,可以移步到这里

http://imjinyuan.diandian.com/post/2013-07-25/40050686081


文中说到:

由于IE6\IE7不支持display:table-cell, 只好想其他办法来让图片实现垂直居中对齐。首先需要对DIV设置 *display:block ,利用淘宝工程师贡献了一种方法,通过设置DIV的font-size来实现垂直居中,当元素的高度/字体大小=1.14左右的时候图片能够垂直居中。完整CSS如下:

box{
   width:200px;
   height:200px;
   border:1px solid #06C;
   display:table-cell;
   text-align:center;
   vertical-align:middle;
   *display:block;
   *font-size:175px;
}

table-cell是是么呢,在http://www.w3schools.com/cssref/pr_class_display.asp  中找到一段描述

The element is displayed as a table cell

含义是元素按照一个表格单元显示,可以理解为类似表格的单元吧