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