您的位置:首页 > CSS技巧 > 【 返回上一页

span内文字居中css布局方法_让span内容居中

span内文字居中条件与实现CSS布局方法

span默认不像div是块元素,对span使用文字居中text-align:center样式,文字内容是无法在span居中的。最直观对span设置宽度无效的。了解《span宽度设置

以下解决方法,为了能看见居中效果,所以对span设置宽度和边框

内容居中CSS代码text-align:center

解决一:span设置float

设置浮动,再设置text-align:center,内容即可居中

css float 实现span内容居中
css float 实现span内容居中

通过设置float浮动,让span设置宽度生效,从而设置内容居中(text-align:center)属性生效。

解决二:span设置display:block

让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。

css实现span内容居中
css实现span内容居中

解决三:span设置display:inline-block

前面介绍对span设置display:block,形成块,那么display:inline-block不独占一行块属性,同样可以让SPAN内容居中生效。这样可以让span并排同时设置宽度生效,这样达到并排同时字体内容也可以设置居中。

span内容居中设置实现
span内容居中设置实现

以上三种居中方法,各有各优势和特点,根据需求选择适合需求方法,除了使用span,也可以考虑使用p标签div标签等标签替代,这样节约CSS代码,让布局更简单,以实现布局需求而不拘于一定是用什么html标签

相关标签: 居中 span text center
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/jiqiao/1425.shtml

日期:2017-09-12 14:45 www.thinkcss.com thinkcss原创