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看看其他人的看法
  • I visited many websites however the audio feature for audio songs existing at this web page is really fabulous.

  • 1 htt ... 2017-5-16 01:23 星期二
  • }
  • Do you mind if I quote a couple of your articles as long as I
    provide credit and sources back to your
    webpage? My blog is in the exact same niche as yours and my visitors would really benefit from some
    of the information you provide here. Please let me know if this
    alright with you. Thank you!

  • 2 min ... 2018-9-22 23:49 星期六
  • }
  • Heya i am for the first time here. I came across this
    board and I find It truly useful & it helped me
    out a lot. I hope to give something back
    and aid others like you aided me.

  • 3 min ... 2018-9-25 03:14 星期二
  • }
  • Everything is very open with a precise clarification of the challenges.
    It was really informative. Your site is very helpful. Thanks for sharing!

  • 4 min ... 2018-9-27 22:51 星期四
  • }
  • If you want to take much from this piece of writing then you have
    to apply such strategies to your won weblog.

  • 5 min ... 2018-9-29 05:47 星期六
  • }
  • Pretty nice post. I just stumbled upon your blog and wanted to say that I've truly enjoyed surfing around your blog posts.

    In any case I will be subscribing to your rss feed and I hope you write again very soon!

  • 6 min ... 2018-9-29 17:29 星期六
  • }

有什么想说的吗?