威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

DIV中让图片水平、垂直居中(图片宽高未知)

DIV中如何让未知高度宽度的图片垂直居中,而垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用,不过可以将div转变成表格元素进行渲染。
DIV中让图片水平、垂直居中(图片宽高未知)
目录
文章目录隐藏
  1. Html代码:
  2. CSS代码:
  3. 演示地址:

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;
}
演示地址:

您可能还会对这些文章感兴趣!

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

  1. ejsoon
    4楼
    ejsoonOpera 63.3.3216.58675 Android 5.1.1

    好像.box沒必要設置
    vertical-align:middle;

    用在線html測試之後
    https://ejsoon.win/ejhehe-intro/

    發現果然還是需要的…

    2023-08-08 09:13 回复
    • William
      WilliamFirefox 116.0 Windows 10

      @ejsoon这个是针对.box这个容器进行居中的,开始已经让这个容器变为表格属性了,vertical-align:middle;垂直居中,text-align:center;水平居中。这也是针对表格常用的居中写法。
      好早之前的文章了,那时候刚学CSS没多久。

      2023-08-08 09:48 回复
  2. 10以后
    地板
    10以后:搜狗高速浏览器 Windows XP

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

    2011-11-30 10:05 回复
  3. aaa
    板凳
    aaa:360安全浏览器 Windows XP

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

    2011-11-17 09:07 回复
  4. 我们只好
    沙发
    我们只好:Google Chrome 12.0.725.0 Windows 7

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

    2010-01-31 16:03 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

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