Loading

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

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

 

posted @ 2018-04-03 09:50  澎湃_L  阅读(13429)  评论(0)  编辑  收藏  举报