text-align: center;应用场景
:父盒子设置text-align: center;
后,盒子里面的文字内容
、行内元素
、行内块元素
、 都可以水平居中对齐;而块级元素一般是不可以水平居中
的。
请注意,块级元素一般是不可以水平居中
,是分以下两种情况的:
情况一:块级元素没有设置宽高(就会继承父盒子的宽高)
,且父盒子设置了text-align: center;
的话,是可以水平居中的。
情况二:块级元素设置宽高
(就不会继承父盒子的宽高,以自己的宽高为准),也没有设置margin:0 auto;
的时候,是不可以水平居中的。
so,块级元素
想要水平居中,做法有两个:
做法一:块级元素没有设置宽高,且父盒子设置了text-align: center;
做法二:块级元素设置margin:0 auto;
即可
和flex属性一样,需要区分父和子,而不是对本身生效。
一个大盒子里面设置几个小盒子的垂直居中用弹性盒子模型。
vertical-align:垂直居中,只对行内块级元素有效。