为什么设置为行内块无法设置文字居中,必须要块级元素
登陆购买课程后可参与讨论,去登陆吧
同学你好,实现文字居中效果,肯定是在一定的空间内居中,块级元素默认占据父盒子100%的宽度,所以可以直接设置text-align: center属性实现文字水平居中,如图
而行内块元素以及行内元素,其宽度默认是被内部文字撑起来的,即内容有多大,外层盒子就有多大,所以设置text-align: center属性也没有效果,如图
除非给行内块元素设置一个宽度(行内元素不支持设置宽高),大于内容的宽度,此时text-align: center属性就会生效了,如图
祝学习愉快!
也就是说,要有宽度才能设置水平居中是吧,那垂直居中呢
那行内块到底有什么用呢,突然有点懵,麻烦老师再解释一下
同学你好,是的,实现文字水平居中,盒子一般要有宽度,内部的文字才可以在盒子内居中,同学可以当作一个常识来思考一下。
实现垂直居中的话,与水平居中一样,肯定是在一个空间内居中,分为以下两种情况:
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等)。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
登录后可查看更多问答,登录/注册
入行前端,是明智的选择!市场需求大,就业前景好,入行门槛低,小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建
157 1
75 1
31 2
200 5
155 1
在线咨询
领取优惠
免费试听
领取大纲
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星