css文字纵向排列且居中

原创已于 2022-06-08 13:38:32 修改 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

收录于

于 2022-06-08 13:37:51 首次发布

前端开发问题记录专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个宽度为170px，高度为254px的提示框，文字垂直排列并居中显示，通过flexbox和writing-mode属性来达到视觉效果。

问题描述

css文字纵向排列且居中


    .tips view {
        width: 170px;
        height: 254px;
        line-height: 254px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        writing-mode: vertical-rl;
        font-size: 30px;
    }