等待-放飞梦想

勤现在-乐将来

CSS图片垂直居中方法整理

Await / 前端交互 / 2008/08/18 8:48 / 热度(1,754)

1.标准浏览器方法:

* {margin:0;padding:0}
div {
 width:500px;
 height:500px;
 border:1px solid #ccc;
 overflow:hidden;
 position:relative;
 display:table-cell;
 text-align:center;
 vertical-align:middle
 }
div p {
 position:static;
 +position:absolute;
 top:50%
 }
img {
 position:static;
 +position:relative;
 top:-50%;left:-50%;
 width:276px;
 height:110px
 }
 
<div><p><img src="http://www.idods.com/images/logo.jpg" /></p></div>

2.标准浏览器下另类方法:

  1. body {
  2.  margin:0;padding:0
  3.  }
  4. div {
  5.  width:500px;
  6.  height:500px;
  7.  line-height:500px;
  8.  border:1px solid #ccc;
  9.  overflow:hidden;
  10.  position:relative;
  11.  text-align:center;
  12.  margin:auto
  13.  }
  14. div p {
  15.  position:static;
  16. +position:absolute;
  17.  top:50%
  18.  }
  19. img {
  20.  position:static;
  21. +position:relative;
  22.  top:-50%;left:-50%;
  23.  width:276px;
  24.  height:110px;
  25.  vertical-align:middle
  26.  }
  27. p:after {
  28.  content:".";font-size:1px;
  29.  visibility:hidden
  30.  }
  31.  
  32. <div><p><img src="http://www.idods.com/images/logo.jpg"/></p></div>

3.利用字体大小的方法:

  1. .box {
  2.     display: table-cell;
  3.     vertical-align:middle;
  4.     text-align:center;
  5.     /* 针对IE的Hack */
  6.     *display: block;
  7.     *font-size: 175px;
  8.     *font-family:Arial;
  9.  
  10.     width:200px;
  11.     height:200px;
  12.     border: 1px solid #eee;
  13. }
  14. .box img {
  15.     vertical-align:middle;
  16. }
  17. <div class="box">
  18.     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
  19. </div>

4.display:inline-block 方法:

  1. div {
  2.  display:table-cell;
  3.  height:300px;
  4.  width:500px;
  5.  text-align:center;
  6.  border:1px solid #000;
  7.  vertical-align:middle
  8.  }
  9.  
  10. <!--[if IE]>
  11.  
  12. i {
  13.  display:inline-block;
  14.  height:100%;
  15.  vertical-align:middle
  16.  }
  17. img {
  18.  vertical-align:middle
  19.  }
  20.  
  21. <![endif]-->
  22. <div>
  23. <img src="http://www.idods.com/images/logo.jpg" />
  24. </div>

发表评论

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

*

您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件，快速提升流量