当前位置: 首页 > 设计 > 正文
avatar

DIV中如何让未知高度宽度的图片垂直居中,而垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用,不过可以将div转变成表格元素进行渲染。

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="http://www.weisay.com/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;
} 
演示地址:
本文固定链接: http://www.weisay.com/blog/img-horizontal-vertical-center.html | 威言威语

DIV中让图片水平、垂直居中(图片宽高未知):目前有5 条评论

  1. avatar
    地板
    10以后 搜狗浏览器 Windows

    不错 不知道能不能用 但是启发我了

    2011-11-30 10:05 [回复]
  2. avatar
    板凳
    aaa 360安全浏览器 Windows

    如果图片的宽高超过容器的大小呢?怎么办?

    2011-11-17 09:07 [回复]
    • avatar
      William Google Chrome Windows

      这个么你可以试试哇,一试就知道了啊

      2011-11-18 23:16 [回复]
      • avatar
        aaa 360安全浏览器 Windows

        我试了,不好使的

        2011-11-19 09:55 [回复]
  3. avatar
    沙发
    我们只好 Unknow Browser Unknow Os

    这个方法比较简单,用了~

    2010-01-31 16:03 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter