垂直/水平居中的几种方法:
1.[原理] 设定宽度和高度,父节点为 position:relative; CSS是这样写的:position:absolute;left:50%;top:50%;
margin-left:-元素自身宽度的一半;
margin-top:-元素自身高度的一半;2.[原理] table, 用起来就更简单了, 只要添加:text-algin:center;
vertical-align:middle;[方法] 提供模板化的CSS class方法, 规则如下:<div class="sl-hvalign" style="width:500px"> <!-- 记得加宽度, 不要写行内样式, 这里只是一个提示 -->
<div class="sl-hvalign-cnt">
<div class="sl-hvalign-cnt-inner">
<a title="易享购" href="http://www.eologo.cn/"><img alt="易享购" src="http://www.eologo.cn/index/Tpl/default//public/images/logo.gif"></a>
</div>
</div>
</div> <!-- .sl-hvalign -->样式:.sl-hvalign{
display:table;
overflow:hidden;
margin:0 auto;
height: 100%;
*position:relative;
}

.sl-hvalign-cnt{
display:table-cell;
vertical-align: middle;
*position:absolute;
top:50%;
}

.sl-hvalign-cnt-inner{
*position:relative;
*top:-50%;
}

评论() 相关

收藏

赞

表

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。