php css text-align:center;,CSS text-align: center;的使用场景和生效场景(比较详细)

text-align: center;应用场景：父盒子设置text-align: center;后，盒子里面的 文字内容、行内元素、行内块元素、 都可以水平居中对齐；而块级元素一般是不可以水平居中的。

请注意，块级元素一般是不可以水平居中，是分以下两种情况的：

情况一：块级元素没有设置宽高(就会继承父盒子的宽高)，且父盒子设置了text-align: center;的话，是可以水平居中的。

情况二：块级元素设置宽高(就不会继承父盒子的宽高，以自己的宽高为准),也没有设置margin:0 auto;的时候，是不可以水平居中的。

so，块级元素想要水平居中，做法有两个：

做法一：块级元素没有设置宽高，且父盒子设置了text-align: center;

做法二：块级元素设置margin:0 auto;即可

详细事例

text-align应用场景

/*清除浏览器默认间距 */

* {

margin: 0;

padding: 0;

}

.a{

border:4px solid #24b3a3;

text-align: center;

}

.a3 {

/*行内块元素*/

display: inline-block;

width: 300px;

height: 100px;

background-color: green;

}

.a4 {

background-color: red;

}

.a5 {

width: 100px;

height: 200px;

background-color: pink;

}

.a6 {

width: 100px;

height: 200px;

background-color: pink;

/**/

margin: 0 auto;

}

CoderZb

被转成行内块元素的行内元素

未设置宽高+父盒子设置text-align: center;的块级元素可以水平居中

设置了宽高+未设置margin:0 auto;的块级元素无法水平居中

设置了宽高+设置margin:0 auto;的块级元素可以水平居中

效果截图

image.png