单行文字垂直居中
单行文字垂直居中比较简单,只需将 line-height 属性值与其父元素的 height 属性值设为相等即可。如下所示:
.text{
line-height: 20px;
height: 20px;
}
多行文字垂直居中
HTML代码:
<div class="content">
<span class="text">这是第一段文字</span>
<span class="text">这是第二段文字</span>
<span class="text">这是第三段文字</span>
<span class="text">这是第四段文字</span>
<span class="text">这是第五段文字</span>
<span class="text">这是第六段文字</span>
<span class="text">...</span>
</div>
CSS代码:
.content{
/* 此宽高属性可根据自己的需求更改 */
width: 300px;
height:300px;
background: #eee;
/* 关键代码 */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text{
/* 若该元素为行内或块级元素则必须设置以下属性 */
display: inline-block;
}
特别注意:居中的文字必须用HTML标签包裹,并且要将包裹该文字的标签设置为
display : inline-block;