一个简单的例子:
<div style="vertical-align: middle; height: 100px;">
<span>hello world!</span>
</div>可以看到”hello world!”并没有垂直居中。网上有很多人从很多不同地方面进行分析,其实简单概括就一句话:vertical-align的作用范围仅限display: table-cell或display: inline-block元素。
那么如何实现垂直居中呢?
最简单的方法,当父容器的高已知时,可以简单地设定要局中的元素的line-height为父容器的高度即可实现垂直局中。如:
<div style="vertical-align: middle; height: 100px;">
<span style="line-height: 100px;">hello world!</span>
</div>第二个方法,当父容器高度未知,子元素高度已知时,可以依次这样做:
设置父容器position:relative或position:absolute.
设置子元素position:absolute且top:50%.
设置子元素margin-top: -子元素高度的二分之一.
喜欢简单的人们可以使用下面的javascript代码(需要jQuery),原理是在要垂直局中的元素外包一层:
$(function(){
$(‘.vertical-align-middle‘).wrapInner(
‘<table height="100%" width="100%">\
<tr><td style="vertical-align: middle;"></td></tr>\
</table>‘
);
});
注: 将要垂直居中的容器class设成vertical-align-middle即可,如前一例:
<div class="vertical-align-middle" style="height: 100px;">
<span>hello world!</span>
</div>
文章评级:★★★★★☆☆☆☆ 发表者:{izhishi}izhishi 4-26 [ 0]
分享到: