css未知尺寸的图片的水平和垂直居中

wumei2009-10-29 14:41:30

纯CSS实现未知尺寸的图片水平和垂直居中。

.box {
       
/*非IE的主流浏览器识别的垂直居中的方法*/
        display
: table-cell;
        vertical
-align:middle;

       
/*设置水平居中*/
        text
-align:center;

       
/* 针对IE的Hack */
       
*display: block;
       
*font-size:262px;/*约为高度的0.873,300*0.873 约为262*/
       
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

        width
:400px;
        height
:300px;
        border
:1px solid #eee;
}
.box img {
       
/*设置图片垂直居中*/
        vertical
-align:middle;
}

<div class="box">
       
<img src="http://web.freeren.org/static/skins/08.03_orange/img/logo.gif???###"/>
</div>

 

上一篇:网站设计中css解决未知高度的div垂直居中
下一篇:在IE中使用高级CSS3选择器(一)

  • >> more看看其他人的看法
  • 嘿!快速的问题,是完全关闭的话题。你知道如何使你的网站移动友好吗?浏览我的苹果iPhone时,我的网站看起来怪异。我试图找到一个模板或插件可能可以解决这个问题。如果您有任何建议,请分享。非常感谢!

  • 1 payday loans mississauga 2012-1-11 18:26 Wednesday
  • }
  • HOWDY !你知道,如果他们做任何的插件,以帮助搜索引擎优化?我想我的博客排名为一些有针对性的的关键字,但我没有看到很好的收益。如果你知道任何请分享。非常感谢!

  • 2 search engine optimization vancouver 2012-1-13 06:18 Friday
  • }
  • 这种设计是壮观!显然,你知道如何使读者发笑。之间的智慧和你的影片中,我几乎被感动,开始我自己的博客(以及,几乎... ...哈哈! )出色。我真的很喜欢你说什么,并不止于此,你如何提交。太酷了!

  • 3 oh canada 2012-1-21 12:36 Saturday
  • }

有什么想说的吗?