display:table- cell属性的练习

display:table- cell属性指让标签元素以表格单元格的形式呈现，相似于td标签。目前IE8+以及其余现代浏览器都是支持此属性的，可是IE6/7只能对你说 sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

咱们都知道，单元格有一些比较 特别的属性，例如元素的垂直居中对齐，关联伸缩等，因此display:table-cell仍是有很多潜在的使用价值的，虽然说IE6/7不支持此属性， 可是幸运的是，IE6/7一些乱糟糟的属性与渲染，咱们能够其余方法实现一样或是相似的效果。 

与其余一些display属性类 似，table-cell一样会被其余一些CSS属性破坏，例如float, position:absolute，因此，在使用display:table-cell与float:left或是position:absolute 属性尽可能不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱 脱的一个td标签元素了。

 

 

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。容许指定负长度值和百分比值。这会使元素下降而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

.box {
                /*非IE的主流浏览器识别的垂直居中的方法*/
                display: table-cell;
                vertical-align:middle;
                /*设置水平居中*/
                text-align:center;
                /* 针对IE的Hack */
                *display: block;
                *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
                *font-family:Arial;/*防止非utf-8引发的hack失效问题，如gbk编码*/
                width:200px;
                height:200px;
                border: 1px solid #eee;
                }
            .box img {
                /*设置图片垂直居中*/
                vertical-align:middle;
                }

 

 

<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

 

下面是个人公众号，你们能够关注一下，能够一块儿学习，一块儿进步：