html span 字体位置,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内容居中
通过设置float浮动,让span设置宽度生效,从而设置内容居中(text-align:center)属性生效。
解决二:span设置display:block
让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。
css实现span内容居中
解决三:span设置display:inline-block
前面介绍对span设置display:block,形成块,那么display:inline-block不独占一行块属性,同样可以让SPAN内容居中生效。这样可以让span并排同时设置宽度生效,这样达到并排同时字体内容也可以设置居中。
span内容居中设置实现
以上三种居中方法,各有各优势和特点,根据需求选择适合需求方法,除了使用span,也可以考虑使用p标签、div标签等标签替代,这样节约CSS代码,让布局更简单,以实现布局需求而不拘于一定是用什么html标签。
作者:css5原创