我不明白这一点:我试过将HTML的<span>标签的文本对齐居中,但是什么也没做......使用<div>标签,一切都正常了。同样的情况下,在css中设置margin: 0px auto;。为什么span标签不支持text-align;函数?
<span>
<div>
margin: 0px auto;
text-align;
p4rjhz4m1#
这个区别并不是<span>和<div>之间的区别,而是inline和block元素之间的区别。<span>默认为display:inline;,而<div>默认为display:block;。两者之间text-align:center工作方式的差异在于宽度。block元素默认为容器的宽度,也可以使用CSS设置宽度,但无论哪种方式,宽度都是固定的。inline元素的宽度取自其内容文本的大小。text-align:center告诉文本在元素中居中定位,但在inline元素中,这显然不会有任何效果,因为元素与文本等宽;将其以一种或另一种方式对齐是没有意义的。在block元素中,由于元素的宽度与内容无关,因此可以使用text-align样式在元素中定位内容。最后,为您提供一个解决方案:display属性有一个额外的值,它提供了block和inline之间的中间房屋。为了方便起见,它被称为inline-block。如果您在CSS中将<span>指定为display:inline-block;,它将继续作为一个内联元素工作,但也将具有块的一些属性。例如指定width的功能。一旦指定了宽度,就可以使用text-align:center;在该宽度内居中文本
inline
block
display:inline;
display:block;
text-align:center
text-align
display
inline-block
display:inline-block;
width
text-align:center;
uklbhaso2#
正如其他人所说,span是一个内嵌元素。参见此处:http://www.w3.org/TR/CSS2/visuren.html此外,还可以通过应用
style="display: block; margin: 0px auto; text-align: center;"
cnjp1d6j3#
span是内联的,div是块元素,即span的宽度和它们各自的内容一样。你可以在周围的容器中对齐span(如果它是块容器),但是你不能对齐内容。Span主要用于格式设置。如果你想排列或定位内容,可以使用div、p或其他块元素。
rt4zxlrg4#
span标签的宽度与其内容的宽度相同,因此span标签没有“中心”,内容的两侧没有多余的空间。但是,div标签的宽度与其包含元素的宽度相同,因此可以使用内容不占用的任何额外空间将该div的内容居中。所以如果你的div是100px宽,而你的内容只占50px,浏览器会把剩下的50px除以2,然后在内容的两边各填充25px,使其居中。
4urapxun5#
Span被认为是一个内嵌的元素。因此它基本上将自己限制在其中的内容。它或多或少是透明的。想象一下它具有'b'标记的行为。它可以像粗体文本一样执行div是块元素。
pobjuy326#
可能是这样,因为你的span元素集的宽度和内容一样。如果你有一个500px宽度的div,文本居中对齐,你输入一个span标签,它应该居中对齐。所以你的问题可能是CSS的问题。在Firefox安装Firebug,检查你的span或div对象的样式属性。
6条答案
按热度按时间p4rjhz4m1#
这个区别并不是
<span>
和<div>
之间的区别,而是inline
和block
元素之间的区别。<span>
默认为display:inline;
,而<div>
默认为display:block;
。两者之间
text-align:center
工作方式的差异在于宽度。block
元素默认为容器的宽度,也可以使用CSS设置宽度,但无论哪种方式,宽度都是固定的。inline
元素的宽度取自其内容文本的大小。text-align:center
告诉文本在元素中居中定位,但在inline
元素中,这显然不会有任何效果,因为元素与文本等宽;将其以一种或另一种方式对齐是没有意义的。在
block
元素中,由于元素的宽度与内容无关,因此可以使用text-align
样式在元素中定位内容。最后,为您提供一个解决方案:
display
属性有一个额外的值,它提供了block
和inline
之间的中间房屋。为了方便起见,它被称为inline-block
。如果您在CSS中将<span>
指定为display:inline-block;
,它将继续作为一个内联元素工作,但也将具有块的一些属性。例如指定width
的功能。一旦指定了宽度,就可以使用text-align:center;
在该宽度内居中文本uklbhaso2#
正如其他人所说,span是一个内嵌元素。
参见此处:http://www.w3.org/TR/CSS2/visuren.html
此外,还可以通过应用
cnjp1d6j3#
span是内联的,div是块元素,即span的宽度和它们各自的内容一样。你可以在周围的容器中对齐span(如果它是块容器),但是你不能对齐内容。
Span主要用于格式设置。如果你想排列或定位内容,可以使用div、p或其他块元素。
rt4zxlrg4#
span标签的宽度与其内容的宽度相同,因此span标签没有“中心”,内容的两侧没有多余的空间。
但是,div标签的宽度与其包含元素的宽度相同,因此可以使用内容不占用的任何额外空间将该div的内容居中。
所以如果你的div是100px宽,而你的内容只占50px,浏览器会把剩下的50px除以2,然后在内容的两边各填充25px,使其居中。
4urapxun5#
Span被认为是一个内嵌的元素。因此它基本上将自己限制在其中的内容。它或多或少是透明的。
想象一下它具有'b'标记的行为。
它可以像粗体文本一样执行
div是块元素。
pobjuy326#
可能是这样,因为你的span元素集的宽度和内容一样。如果你有一个500px宽度的div,文本居中对齐,你输入一个span标签,它应该居中对齐。所以你的问题可能是CSS的问题。在Firefox安装Firebug,检查你的span或div对象的样式属性。