带有text-align:center;属性的<span>和<div>之间的区别是什么？

Question

我不明白这个：

我尝试使HTML的<span>标签文本居中，但是没有效果...使用 <div> 标签时，一切正常。在CSS中设置 margin: 0px auto; 也是同样的情况。

为什么标签不支持text-align;函数？

- Akos

---

“内联元素和块级元素在text-align:center方面的区别是什么？” - sandeep

"text-align" 不是一个函数，而是 CSS 的属性。 - Sebastian Simon

Answer 1

区别并不是特别在于和

，而是在于内联元素（inline）和块级元素（block）之间的区别。默认为"display:inline;"，而

默认为"display:block;"。但是这些可以在CSS中覆盖。

两者之间text-align:center的工作方式的不同在于宽度。

块级元素默认为其容器的宽度。它可以使用CSS设置宽度，但无论如何它都是固定宽度。

内联元素从其内容文本的大小中获取其宽度。

"text-align:center"将文本告诉以居中的方式定位于元素中。但在内联元素中，这显然不会产生任何影响，因为元素与文本具有相同的宽度；将其对齐到一侧或另一侧是没有意义的。

在块级元素中，由于元素的宽度独立于内容，因此可以使用"text-align"样式在元素内定位内容。

最后，为您提供一个解决方案：

"display"属性还提供了一种介于块级元素和内联元素之间的折衷方案。方便的是，它被称为"inline-block"。如果您在CSS中将指定为"display:inline-block;"，它将继续作为内联元素工作，但也会具有块的某些属性，例如指定"width"的能力。一旦您为其指定宽度，您就可以使用"text-align:center;"在该宽度内居中文本。

- Spudley

---

讲解得非常清楚明白。干杯！ - frank

非常好的解释。谢谢。 - Debbie A

更恰当的术语应该是“内联级别”和“块级别”元素。 - Sebastian Simon

这个答案并不是完全正确的。虽然逻辑上说得通，但它并没有准确地解释 text-align 属性的工作原理。 - Michael Benjamin

“text-align:center的工作方式在这两种情况下的差异取决于宽度。”不对。text-align不能在内联级元素上工作的原因与宽度无关，而是与text-align的定义有关。 - Michael Benjamin

Answer 2

就像其他人所说，span是一个内联元素。

可以参考此处：http://www.w3.org/TR/CSS2/visuren.html

另外，您可以通过应用样式来使span表现得像div一样。

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

- ooPeanutButter

Answer 3

Spans是内联元素，divs是块级元素。也就是说，spans的宽度仅限于其内容。如果它是块级容器，您可以将span对齐到周围的容器中，但无法对齐内容。 Span主要用于格式化目的。如果您想排列或定位内容，请使用div、p或其他块级元素。

- Dennis Traub

Answer 4

标记只有其内容那么宽，因此标记没有“居中”的位置，其内容两侧没有额外的空间。

标记的宽度与其包含的元素一样宽，因此该

的内容可以使用任何未被占用的额外空间来居中。

因此，如果您的

宽度为100像素，而内容只占用了50像素，则浏览器会将剩余的50像素平均分配给两侧，并填充25像素以使内容居中。

- slolife

Answer 5

标签被认为是一个内联元素。因此，它基本上仅限于其中的内容。它或多或少是透明的。 可以将其视为 'b' 标签的行为。 可以像这样执行：<span style='font-weight: bold;'>粗体文本</span>

是一个块级元素。

- Dave G

Answer 6

可能是因为您的span元素将其边缘设置为与其内容一样宽。如果您有一个宽度为500px且文本居中对齐的div，并输入一个span标记，则应在中心对齐。因此，您的问题可能是CSS问题。 在Firefox中安装Firebug并检查您的span或div对象具有的样式属性。

- longi