您的位置: 首页 > 文章 > CSS-15.盒子居中和内容居中

CSS-15.盒子居中和内容居中

分类: 文章 • 2024-06-24 19:31:10

盒子居中

实例演示：

<style>

.all{

border: 1px solid ;

height: 500px;

width: 500px;

background-color: red;

margin: 0 auto;

}

.content{

width: 200px;

height: 200px;

background-color: green;

margin: 150px auto;

}

</style>

CSS-15.盒子居中和内容居中

margin:0 auto是设置盒子在外面盒子的水平中间部位，而不是设置内容居中，当设置了

margin:0 auto的时候，可见文字并没有居中。当你想让文字或者图片居中时，要使用

text-align: center;

内容居中

<style>

.all{

border: 1px solid ;

height: 500px;

width: 500px;

background-color: red;

margin: 0 auto;

text-align: center;

}

.content{

width: 200px;

height: 200px;

background-color: green;

margin: 150px auto;

}

</style>

CSS-15.盒子居中和内容居中

因为继承性的原因，设置了大盒子的，小盒子继承了大盒子的text-align: center;