zen-cart网站,模版,采集,二次开发

首页 » 网页前端 » CSS » 阅读文章

CSS垂直居中实现方法总结

2012-01-10 12:08 22888 0 发表评论
标签:


全部转载别人的,留作记录备查,框架

<style>
		.wrap{width:400px;height:250px;text-align:center;border:1px solid #ccc;}
</style>
<div class="wrap">
<span><img src="http://www.ezencart.com/wp-content/themes/tstyle/img/logo-head.gif"/></span>
</div>

1.利用line-height

范围:适用于单行文本或图片

原理:当line-height高度和容器高度相等时,line-height行高即会向上和向下空出容器的一半高度,即垂直居中了。

即增加css

.wrap{line-height:250px;}

演示:demo

缺点:IE6不支持,增加IE6的hack

<!--[if IE 6]>
<style type="text/css">
  .wrap span {
    height: 100%; /* 要保证和父元素高度一样才行 */
    writing-mode: tb-rl;
    vertical-align: middle;
  }
</style>
<![endif]-->

2.利用 position 和负边距

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

即增加代码

.wrap{position:relative;}
.wrap span{position:absolute;top:50%;	margin-top:-25px;left:50%;margin-left:-96px;}

演示:demo

缺点: 必须知道元素的宽高

3.利用display:table

table中垂直居中是非常简单的事,table cells 的 vertical-align:middle 就可以直接解决。因此我们可以在支持display:table / display:table-cell的浏览器中利用table的这一属性。

即增加代码

.wrap{display:table;}
.wrap span{display:table-cell;vertical-align:middle;}

演示:demo

缺点: IE6/IE7不支持

4.最终方案

只要加多一层。内 .hack 层 top:50%; 再让 span 层相对自身向上提50%。

即增加代码

.wrap{display:table; *position:relative;}
.wrap .hack{display:table-cell;vertical-align:middle;*position:absolute;*top:50%;*left:50%;}
.wrap span{ *position:relative;*top:-50%;*left:-50%;}

演示:demo

转载:http://sofish.de/1909
http://bbs.blueidea.com/thread-2666987-1-1.html

相关日志:

评论 共0条 (RSS 2.0) 发表评论

  1. 暂无评论,快抢沙发吧。

发表评论

  • 
  • 插入代码

联系我 Contact Me

回到页首