首页 > 其他 > 详细

固定容器高度的多行文字垂直居中

时间:2017-08-24 14:02:54      阅读:195      评论:0      收藏:0      [点我收藏+]

思路:把文字用span包裹起来,设置为inline-block,相当于图片img的属性。父div用table-cell的样式,用vertical-align:middle实习上下居中

<div class="box">
            <span>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中</span>
</div>
.box{width:400px;height:500px;border: 3px solid #333;padding: 0 10px;display:table-cell;vertical-align:middle;}
.box span{display: inline-block;}

使用这方法需要注意的一点是外部div不能使用浮动或者绝对定位。

 

固定容器高度的多行文字垂直居中

原文:http://www.cnblogs.com/javenlee/p/7422617.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!