Question

我不明白这一点：

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

为什么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。如果在CSS中指定<span>为display:inline-block;，它将继续作为内联元素工作，但也将采用块的某些属性，例如指定一个块的属性width。为其指定宽度后，您可以使用text-align:center;

将文本置于该宽度的中心

希望有所帮助。

Answer 2

正如其他人所说，span是一个内联元素。

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

此外，您可以通过应用

使跨度表现为div

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

Answer 3

Spans是内联的，div是块元素。即跨度仅与它们各自的内容一样宽。您可以在周围容器内对齐跨度（如果它是块容器），但是您无法对齐内容。

Span主要用于格式化目的。如果要排列或定位内容，请使用div，p或其他一些块元素。

Answer 4

span标记仅与其内容一样宽，因此span标记没有“中心”。内容的任何一侧都没有额外的空间。

然而，div标签与其包含元素一样宽，因此该div的内容可以使用内容不占用的任何额外空间来居中。

因此，如果您的div宽度为100px且内容只需50px，则浏览器会将剩余的50px除以2并在内容的每一侧填充25px以使其居中。

Answer 5

Span被认为是一个内联元素。因此，它基本上限制了其中的内容。它或多或少是透明的。

认为它具有'b'标签的行为。

可以像＆lt; span style ='font-weight：bold;'＆gt;粗体文字＆lt; / span＆gt;

一样执行

div是一个块元素。

Answer 6

可能是，因为您的span元素集的宽度与其内容一样。如果您有一个宽度为500px且文本对齐中心的div，并且您输入了span标记，则它应该在中心对齐。所以你的问题可能是CSS问题。在Firefox上安装Firebug并检查span或div对象具有的样式属性。

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

6 个答案: