1. 程式人生 > >固定容器高度的多行文字垂直居中

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

需要 pad color ica round pre 絕對定位 span ddl

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

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