在做网站时经常会需要做列表排版,然后让垂直居中,如果是文字相同还好,如果是文字不确定是几行,但是要始终保持垂直居中,该怎么办呢?其实很简单只需要,给父元素设置固定高度 height:px 和display: table; 子元素设置 display: table-cell; vertical-align: middle; 就可以啦。下方案例
css设置多行文本始终保持垂直居中html代码
<div class="anli">
<p>
css设置多行文本始终保持垂直居中文字
</p>
</div>
<div class="anli">
<p>
css设置多行文本始终保持垂直居中文字<br>
css设置多行文本始终保持垂直居中文字<br>
css设置多行文本始终保持垂直居中文字<br>
</p>
</div>
css设置多行文本始终保持垂直居中css代码
.anli{
float:left;
text-align: center;
height:400px;
border:1px solid #333;
display: table;
}
p{
display: table-cell;
vertical-align: middle;
}
css设置多行文本始终保持垂直居中效果图