css设置文本(上下)居中显示

最新推荐文章于 2024-04-18 16:22:07 发布

90后纳税人

最新推荐文章于 2024-04-18 16:22:07 发布

阅读量3.6k

点赞数

分类专栏： HTML 文章标签： html 上下居中 css

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/ShuTongIt/article/details/111029442

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文本的居中显示

示例图：

文本居中显示

css 样式

 <style>

        .item {
            width: 150px;
            height: 200px;
            border: red 1px solid;
            box-sizing: border-box;
            float: left;
            
        }
        .first {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .second {
            line-height: 200px;
        }
        .thrid {
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
        }
    </style>

body体

<body>

        <div class="first item">

            <span>
                flex 布局实现
                good good study day day up
            </span>
        </div>
        <div class="second item">
            <span>
                lineHeight用于单行
            </span>
        </div>
        <div class="thrid item">
            <span>
                利用position 定位来实现1
                good good study day day up
            </span>
        </div>

    
</body>

script


<script>
    function checkHtml(htmlStr) {
        var reg = /<[^>]+>/g;
        return reg.test(htmlStr);
    }
    checkHtml('点击此<span style="color: rgb(244, 113, 31);">处进</span><span style="color: rgb(136, 136, 136);">行编</span>辑')
</script>

90后纳税人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css设置文本(上下)居中显示

文本的居中显示css 样式 <style> .item { width: 150px; height: 200px; border: red 1px solid; box-sizing: border-box; float: left; } .first { displa
复制链接

扫一扫