为了账号安全,请及时绑定邮箱和手机立即绑定

display: table-cell; text-align: center;为啥不能实现水平居中

老师按照你上面讲的垂直居中 table 原理

父元素 display: table-cell;     text-align: center 为啥不能实现水平居中?

正在回答

代码语言

3 回答

vertical-align是设置在内联元素或者单元格上的。前者是让内联元素本身在一行里进行某种垂直对齐。后者是让单元格内部的整个内容相对于单元格这个容器进行某种垂直对齐方式。


而text-align是设置在块级元素上,让内部内联子元素进行水平对齐的。


text-align还是好理解一些,设置在父容器,让子元素去对齐。vertical-align一般设置在内联元素本身(看作设置在子元素上),让它自己相对于line box(内联元素的容器)去对齐;特殊场景,vertical-align设置在父容器单元格上,让子元素去对齐。


0 回复 有任何疑惑可以回复我~

因为 text-align 对作为块级元素的子元素无效,但子元素的文本会继承 text-align 的效果导致该文本在子元素内水平居中。

1 回复 有任何疑惑可以回复我~

子元素的文案是居中,并且是可以继承的。块级子元素不能居中。

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

display: table-cell; text-align: center;为啥不能实现水平居中

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号