长文本文本在div中垂直居中

原创于 2018-09-29 16:21:42 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文本垂直居中

css样式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种实现单行文本垂直居中的CSS技巧，同时提供了适用于长文本的解决方案，通过嵌套div标签并应用特定样式，确保文本在不同长度下都能保持良好的视觉效果。

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

单行文本垂直居中直接使用：

line-height： 10px;

但是如果长文本用这个会造成样式混乱，若要匹配长文本，则在div和p标签直接在添加一层div

<div class="a">
	<div class="b">
		<p>文本内容内容</p>
	</div>
</div>
.a {
   line-height: 10px；
   background: #98e1b7;
}
.b{
   display: inline-block;
   vertical-align: middle;
   background: #666;
   line-height: 0.5rem;
}

在这里插入图片描述