display:table- cell属性的练习-html教程-PHP中文网

display:table- cell属性的练习

php中文网

发布： 2016-08-10 08:49:43

原创

1343人浏览过

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

关于Objective

本文档主要讲述的是关于Objective-C手动内存管理的规则；在ios开发中Objective-C 增加了一些新的东西，包括属性和垃圾回收。那么，我们在学习Objective-C之前，最好应该先了解，从前是什么样的，为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看

查看详情

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以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;
               }