多行文字垂直居中

最新推荐文章于 2022-11-22 12:06:58 发布

原创最新推荐文章于 2022-11-22 12:06:58 发布 · 489 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文字垂直居中 #多行文字居中 #多行文字垂直居中 #垂直居中

本文介绍了如何使用CSS实现单行及多行文字的垂直居中显示。对于单行文字，仅需设置line-height与height相等即可。多行文字则需利用display:table-cell和vertical-align:middle属性组合实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文字垂直居中

单行文字垂直居中比较简单，只需将 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;
}