首页 > 其他分享 >关于 text-align: center 设置后文字位置不在中间的原因及解决方法

关于 text-align: center 设置后文字位置不在中间的原因及解决方法

时间:2022-10-24 12:35:02浏览次数:36  
标签:center 样式 text align 元素 设置


关于 text-align: center 设置后文字位置不在中间的原因及解决方法

先说解决方法,给元素设置display:inline-block ,

首先,我们得清楚text-align: center 设置后的作用效果,这个属性设置后会使标签中的文字居中排布,也包括标签的后代元素里的文字居中,即样式的继承。

简单了解后我们直接看问题,在开发或者日常练习中会遇到图片中的情况,

关于 text-align: center 设置后文字位置不在中间的原因及解决方法_css


设置样式后文字的位置并不是居中,而是中间偏左一点。这时候检查后发现是浏览器默认样式,(我这里用的footer标签,块级元素)

关于 text-align: center 设置后文字位置不在中间的原因及解决方法_解决方法_02


要解决这个问题只需给元素设置 display:inline-block 样式即可,将块元素设置为行内块或者行内元素,


标签:center,样式,text,align,元素,设置
From: https://blog.51cto.com/u_15694180/5789398

相关文章