<span>和<div>之间的区别与text-align:center;？

Question

我不明白这个:

我试图将HTML <span>标签的text-align居中,但它没有做任何事情......使用<div>标签,一切正常.与margin: 0px auto;css中的设置相同的sittuation .

为什么span标签不支持该text-align;功能？

Answer 1

差异不在于<span>和<div>具体之间,而在于inline和block元素之间.<span>默认为正在,display:inline;而<div>默认为正在display:block;.但这些可以在CSS中被覆盖.

两者text-align:center之间的方式差异在于宽度.

甲block元件默认为是它的容器的宽度.它可以使用CSS设置其宽度,但无论哪种方式,它都是固定宽度.

一个inline元件从它的内容文本的大小需要其宽度.

text-align:center告诉文本将自己置于元素的中心位置.但是在一个inline元素中,这显然不会产生任何影响,因为元素的宽度与文本的宽度相同; 以某种方式对齐它是没有意义的.

在block元素中,因为元素的宽度与内容无关,所以可以使用text-align样式将内容定位在元素中.

最后,为您提供解决方案:

该display物业还有一个额外的价值,在block和之间提供一个中途的房子inline.方便的是,它被称为inline-block.如果指定<span>要display:inline-block;在CSS中,它将继续作为内联元素工作,但也将采用块的某些属性,例如指定a的能力width.为其指定宽度后,您将能够使用该文本在该宽度中居中text-align:center;

希望有所帮助.

Answer 2

和其他人一样,span是一个内联元素.

见这里:http://www.w3.org/TR/CSS2/visuren.html

此外,您可以通过应用a使跨度表现为div

style="display: block; margin: 0px auto; text-align: center;"