等待-放飞梦想 » img http://leotheme.cn 勤现在-乐将来 Fri, 03 Feb 2012 12:32:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS图片垂直居中方法整理 http://leotheme.cn/javascript/csspicentermiddilefanfa.html http://leotheme.cn/javascript/csspicentermiddilefanfa.html#comments Mon, 18 Aug 2008 12:48:01 +0000 Await http://leotheme.cn/?p=26 您可能也喜欢：
使用lesscss来编码编写css
CSS中关于背景图的应用技巧
CSS实现自动换行的小技巧
CSS清除浮动的一些方法
CSS 3.0 参考手册 (中文版) 无觅 ]]> 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>
您可能也喜欢：

使用lesscss来编码编写css
CSS中关于背景图的应用技巧
CSS实现自动换行的小技巧
CSS清除浮动的一些方法
CSS 3.0 参考手册 (中文版)
无觅

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
]]> http://leotheme.cn/javascript/csspicentermiddilefanfa.html/feed 0