为什么垂直居中+单元格显示就可以让文字垂直居中

为什么垂直居中+单元格显示就可以让文字垂直居中

vertical-align: middle;

display: table-cell; 

单用其中一个属性都实现不了最终的效果


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2020-09-17 17:33:05

@慕丝0512746同学你好,要看设置什么效果了,如果是设置文字在这个单元格中居中,是不需要给父元素设置display: table。如下:

http://img1.sycdn.imooc.com//climg/5f632c920951b06d04120464.jpg

文字嵌套在content中,content设置成单元格,那么文字就在单元格中居中了:

http://img1.sycdn.imooc.com//climg/5f632cb6098e027306490636.jpg

如果是想要在父容器wrap中居中,那么就要设置display: table。如下给父元素添加样式:

http://img1.sycdn.imooc.com//climg/5f632cd90980d3f203940135.jpg

父元素设置为表格之后,因为父元素下面只有一个子元素,所以子元素默认的宽高就会与父元素一致,子元素自身设置的宽高就无效了,即一个表格中如果只有一个单元格,那么这个单元格肯定就与整个表格宽高一致了。单元格内容也就相对整个表格居中了。

http://img1.sycdn.imooc.com//climg/5f632d2909ec804c07850665.jpg

另外,同学如果有任何疑惑的话,可以自己创建一个提问。因为教学服务到期之后,只能查看自己的问答,其他同学的问答无法查看,这样后期无法进行复习了哦。

祝学习愉快~

好帮手慕夭夭 2019-03-27 15:04:58

你好同学 ,因为vertical-align就是在表格中 ,设置内容在td中居中的 .所以一个盒子里面的内容 .想要在盒子里面居中 ,要把这个盒子设置成单元格 , display: table-cell; 中table-cell;就是让盒子显示成单元格 ,相当于让它有了td的特点 .这样设置vertical-align: middle; ,里面的内容就能居中了.

祝学习愉快 ,望采纳 .

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师