为什么设置为行内块无法设置文字居中,必须要块级元素

为什么设置为行内块无法设置文字居中,必须要块级元素

为什么设置为行内块无法设置文字居中,必须要块级元素

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

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

1回答
好帮手慕然然 2021-11-21 18:02:56

同学你好,实现文字居中效果,肯定是在一定的空间内居中,块级元素默认占据父盒子100%的宽度,所以可以直接设置text-align: center属性实现文字水平居中,如图

https://img1.sycdn.imooc.com//climg/619a17fe09de733b14740397.jpg

而行内块元素以及行内元素,其宽度默认是被内部文字撑起来的,即内容有多大,外层盒子就有多大,所以设置text-align: center属性也没有效果,如图

https://img1.sycdn.imooc.com//climg/619a18b2097f9de114960540.jpg

除非给行内块元素设置一个宽度(行内元素不支持设置宽高),大于内容的宽度,此时text-align: center属性就会生效了,如图

https://img1.sycdn.imooc.com//climg/619a1948099cf39a14290582.jpg

祝学习愉快!

  • 提问者 DanielDu87 #1

    也就是说,要有宽度才能设置水平居中是吧,那垂直居中呢

    2021-11-21 21:21:36
  • 提问者 DanielDu87 #2

    那行内块到底有什么用呢,突然有点懵,麻烦老师再解释一下

    2021-11-21 21:22:39
  • 好帮手慕然然 回复 提问者 DanielDu87 #3

    同学你好,是的,实现文字水平居中,盒子一般要有宽度,内部的文字才可以在盒子内居中,同学可以当作一个常识来思考一下。

    实现垂直居中的话,与水平居中一样,肯定是在一个空间内居中,分为以下两种情况:

    1、如果是单行文字垂直居中,一般设置line-height属性,此时height可设可不设,如果设置的话,line-height要与height值相等,如果不设的话,height就默认为line-height的值。

    2、如果是盒子垂直居中,一般可以使用绝对定位来实现(即position:absolute; top:50%;margin-top:高度的负一半),如果不设置高度的话,只需要将“margin-top:高度的负一半修改为transform:translateY(-50%)即可。

    关于行内块元素,同学只需记住html中有哪些是行内块元素即可(比如input、img等),以及行内块元素支持宽高,不独占一行的特性,记住这些特性,是为了书写html结构时,选择合适的元素,以及书写css时便于设置合适的样式属性。

    除了行内块元素,还有块级元素(支持宽高,独占一行,比如div、ul/li等),行内元素(不支持宽高,不独占一行,比如:a、span等)。

    祝学习愉快!

    2021-11-22 13:22:00
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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