关于行内元素垂直居中的一个小小trick

在保持父元素具体数值宽度不变且有不止一行时,可以使用一点小tricks,比如

复制代码
#outer{
text-align: center;
height: 200px;
width: 300px;
}
#outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代码如下*/
<div id="outer">
    <span>span1</span>
    <span>span2</span>
</div>
复制代码

但是,注意:因为vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式,所以该方法只对行内元素有效

posted @   星空飘渺  阅读(801)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示