课程
/前端开发
/HTML/CSS
/一课全面掌握主流CSS布局
老师按照你上面讲的垂直居中 table 原理
父元素 display: table-cell; text-align: center 为啥不能实现水平居中?
2020-03-10
源自:一课全面掌握主流CSS布局 3-2
正在回答
vertical-align是设置在内联元素或者单元格上的。前者是让内联元素本身在一行里进行某种垂直对齐。后者是让单元格内部的整个内容相对于单元格这个容器进行某种垂直对齐方式。
而text-align是设置在块级元素上,让内部的内联子元素进行水平对齐的。
text-align还是好理解一些,设置在父容器,让子元素去对齐。vertical-align一般设置在内联元素本身(看作设置在子元素上),让它自己相对于line box(内联元素的容器)去对齐;特殊场景,vertical-align设置在父容器单元格上,让子元素去对齐。
因为 text-align 对作为块级元素的子元素无效,但子元素的文本会继承 text-align 的效果导致该文本在子元素内水平居中。
子元素的文案是居中,并且是可以继承的。块级子元素不能居中。
举报
一网打尽CSS主流布局方案,一步掌握页面布局技巧.
1 回答水平和垂直居中为啥没说直接用display:flex实现
6 回答table-cell实现垂直居中还有一个比较大的缺点
3 回答水平垂直居中
1 回答为什么实现不了居中?求解
4 回答我对parent和child设置了text-align: left;,居中还是有效
购课补贴联系客服咨询优惠详情
慕课网APP您的移动学习伙伴
扫描二维码关注慕课网微信公众号