css3怎么让文字垂直居中显示?

css3怎么让文字垂直居中显示?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

文字容器高度固定,但容器内部文字个数不知,但要求文字部分垂直居中,利用css3的flex弹性盒子属性可以解决。

核心代码:

.align-center-vertical{display: flex;align-items: left;justify-content: space-around;flex-direction: column;}

示例:

<style>
	.box{width:400px;height:100px;margin-top:100px;font-size:12px;border:1px solid #ccc;}
	.align-center-vertical{display: flex;align-items: left;justify-content: space-around;flex-direction: column;}
</style>
<h3 class="box align-center-vertical">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</h3>

结果:

1.png

可见两行文字垂直居中。

如果减少文字数量:

2.png

同样可以垂直居中。

更多web前端知识,请查阅 HTML中文网 !!

以上就是css3怎么让文字垂直居中显示?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏