Div与CSS布局中,最让人头疼的就是容器内的东西如何垂直居中的问题,而垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。
那么我们是不是可以将div转变成表格呢?这个想法是可行的,W3C参考手册中就提到这些属性,http://www.w3school.com.cn/htmldom/prop_style_display.asp
你可以给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:
table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染
类似的,display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及新型浏览器(Chrome,FireFox。Opera等)都是支持此属性的,但是IE6/7则不支持这一属性,这事实上也是大大制约了display:table-cell属性在实际项目中的应用。
那么,我们实际使用的时候就必须给IE做一些Hack。
Html代码:
<div class="box"> <img src="/blog/ico/css.gif" alt="" /> </div>
CSS代码:
.box { width:400px; height:200px; background:#f2fbff; border:1px #b8e8ff solid; /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ } .box img { /*设置图片垂直居中*/ vertical-align:middle; }
不错 不知道能不能用 但是启发我了
如果图片的宽高超过容器的大小呢?怎么办?
这个么你可以试试哇,一试就知道了啊
我试了,不好使的
这个方法比较简单,用了~