让盒子里的文字居中的几种方法

最新推荐文章于 2023-04-09 14:07:39 发布

weixin_30270889

最新推荐文章于 2023-04-09 14:07:39 发布

阅读量7.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签： java

原文链接：http://www.cnblogs.com/EricZLin/p/8706493.html

问题：大盒子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;
        }