几种将文字居中显示在盒子中的方法

最编程 2024-02-13 08:07:52

...

问题：大盒子div下面有一段小盒子span标签包含的文字，怎么使其居中显示？

<body>
    <div class="box">
        <span>我是一段文字，怎么让我居中？</span>
    </div>
</body>

第一种方法大盒子text-align: center

.box{
            width: 300px;
            height: 300px;
            background: rgb(172, 143, 143);
            text-align: center;
}

第二种方法大盒子box 用 padding-left/padding-right,同时调整大盒子宽度，使大盒子宽度不变

.box{
            width: 250px;
            height: 300px;
            background: rgb(172, 143, 143);
            padding-left: 50px；
}

注：50px是随便取得值，具体的值需计算。

第三种方法，小盒子用定位移动位置

.box{
            width: 300px;
            height: 300px;
            background: rgb(172, 143, 143);
            position: relative;
        }
span{
            position: absolute;
            top: 0;
            left: 30px;
        }

第四种方法小盒子使用margin

.box{
            width: 300px;
            height: 300px;
            background: rgb(172, 143, 143);
        } 
span{
            margin-left: 30px;
        }

上一篇： CSS技巧：轻松实现盒子的水平、垂直及全方位居中对齐

下一篇：三种简单方法让你轻松实现HTML中盒子的水平居中对齐——小贴士