码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:splay   inline   ble   垂直居中   pre   isp   nbsp   文字   color   

思路:把文字用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不能使用浮动或者绝对定位。

 

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

标签:splay   inline   ble   垂直居中   pre   isp   nbsp   文字   color   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!