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

Posted

技术标签:

【中文标题】<span> 和 <div> 与 text-align:center; 之间的区别?【英文标题】:Difference between <span> and <div> with text-align:center;? 【发布时间】:2011-12-07 02:25:30 【问题描述】:

我不明白:

我试图将 html &lt;span&gt; 标记的文本对齐居中,但它什么也没做... 使用&lt;div&gt; 标签,一切正常。与在 css 中设置 margin: 0px auto; 的情况相同。

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

【问题讨论】:

最好说'内联元素和块元素与text-align:center有什么区别' text-align 不是函数,而是 CSS 属性 【参考方案1】:

区别不在于&lt;span&gt;&lt;div&gt; 之间,而是inlineblock 元素之间。 &lt;span&gt; 默认为display:inline;&lt;div&gt; 默认为display:block;。但是这些可以在 CSS 中被覆盖。

text-align:center 两者在工作方式上的区别在于宽度。

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

inline 元素的宽度取自其内容文本的大小。

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

block 元素中,由于元素的宽度与内容无关,因此可以使用text-align 样式在元素内定位内容。

最后,给你一个解决方案:

display 属性还有一个附加值,它提供了介于blockinline 之间的中途房屋。方便的是,它被称为inline-block。如果您在 CSS 中将 &lt;span&gt; 指定为 display:inline-block;,它将继续作为内联元素工作,但也会具有块的某些属性,例如指定 width 的能力。为它指定宽度后,您将能够使用 text-align:center; 将文本居中在该宽度内

希望对您有所帮助。

【讨论】:

解释得很好。干杯! 很好的解释。谢谢。 更合适的术语是“inline-level”和“block-level”元素。 这个答案并不正确。尽管逻辑是有道理的,但它并不能准确解释 text-align 属性的工作原理。 “两者之间text-align:center 工作方式的区别在于宽度。” ...不,原因text-align 不起作用内联元素与宽度无关。它与text-align的定义有关。【参考方案2】:

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

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

此外,您可以通过应用

使 span 表现得像 div
style="display: block; margin: 0px auto; text-align: center;"

【讨论】:

【参考方案3】:

span 是内联的,div 是块元素。即跨度仅与它们各自的内容一样宽。可以对齐周围容器内的 span(如果是块容器),但不能对齐内容。

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

【讨论】:

【参考方案4】:

跨度标签的宽度仅与其内容一样宽,因此跨度标签没有“中心”。内容的两边都没有多余的空间。

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

因此,如果您的 div 宽度为 100 像素,而您的内容仅占用 50 像素,则浏览器会将剩余的 50 像素除以 2 并在内容的每一侧填充 25 像素以使其居中。

【讨论】:

【参考方案5】:

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

认为它具有“b”标签的行为。

可以像bold text

那样执行

div 是块元素。

【讨论】:

【参考方案6】:

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

【讨论】:

以上是关于<span> 和 <div> 与 text-align:center; 之间的区别?的主要内容,如果未能解决你的问题,请参考以下文章

用div加css怎么做出这种菱形框架??或者其他方法??

弹性盒制作骰子

移动端布局,div按比例布局,宽度为百分比,高度和宽度一样,即让div为正方形

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

块和内嵌div和span

用js在指定div里创建span