Html <span> 和 <div> 与 text-align:center; 的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7756926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between <span> and <div> with text-align:center;?
提问by Akos
I don't understand this:
我不明白这个：
I have tried to center the text-align of a HTML <span>tag but it did nothing...
With the <div>tag, everything worked. Same sittuation with setting margin: 0px auto;in css.
我试图将 HTML<span>标签的文本对齐居中，但它什么也没做……有了<div>标签，一切正常。与margin: 0px auto;在 css 中设置的情况相同。
Why does the span tag not support the text-align;function?
为什么span标签不支持该text-align;功能？
回答by Spudley
the difference is not between <span>and <div>specifically, but between inlineand blockelements. <span>defaults to being display:inline;whereas <div>defaults to being display:block;. But these can be overridden in CSS.
区别不是在<span>和<div>具体之间，而是在inline和block元素之间。<span>默认为 bedisplay:inline;而<div>默认为 be display:block;。但是这些可以在 CSS 中被覆盖。
The difference in the way text-align:centerworks between the two is down to the width.
两者工作方式的差异在于text-align:center宽度。
A blockelement defaults to being the width of its container. It can have its width set using CSS, but either way it is a fixed width.
甲block元件默认为是它的容器的宽度。它可以使用 CSS 设置其宽度，但无论哪种方式，它都是固定宽度。
An inlineelement takes its width from the size of its content text.
一个inline元件从它的内容文本的大小需要其宽度。
text-align:centertells the text to position itself centrally in the element. But in an inlineelement, this is clearly not going to have any effect because the element is the same width as the text; aligning it one way or the other is meaningless.
text-align:center告诉文本将自身定位在元素的中央。但是在inline元素中，这显然不会产生任何影响，因为元素与文本的宽度相同；以一种或另一种方式对齐它是没有意义的。
In a blockelement, because the element's width is independent of the content, the content can be positioned within the element using the text-alignstyle.
在block元素中，由于元素的宽度与内容无关，因此可以使用text-align样式将内容定位在元素内。
Finally, a solution for you:
最后，为您提供一个解决方案：
There is an additional value for the displayproperty which provides a half-way house between blockand inline. Conveniently enough, it's called inline-block. If you specify a <span>to be display:inline-block;in the CSS, it will continue to work as an inline element but will take on some of the properties of a block as well, such as the ability to specify a width. Once you specify a width for it, you will be able to center the text within that width using text-align:center;
该display物业有一个额外的价值，它提供了block和之间的中途房屋inline。很方便，它被称为inline-block。如果指定<span>要display:inline-block;在CSS中，它会继续工作，作为一个内联元素，但会采取一些块的性质为好，如指定的能力width。为其指定宽度后，您将能够使用该宽度内的文本居中text-align:center;
Hope that helps.
希望有帮助。
回答by ooPeanutButter
Like other have said, span is an in-line element.
就像其他人所说的，span 是一个内联元素。
See here: http://www.w3.org/TR/CSS2/visuren.html
见这里：http: //www.w3.org/TR/CSS2/visuren.html
Additionally, you can make a span behave like a div by applying a
此外，您可以通过应用
style="display: block; margin: 0px auto; text-align: center;"
回答by slolife
A span tag is only as wide as its contents, so there is no 'center' of a span tag. There is no extra space on either side of the content.
span 标签仅与其内容一样宽，因此 span 标签没有“中心”。内容的两侧没有多余的空间。
A div tag, however, is as wide as its containing element, so the content of that div can be centered using any extra space that the content doesn't take up.
但是，div 标签与其包含的元素一样宽，因此可以使用内容不占用的任何额外空间将该 div 的内容居中。
So if your div is 100px width and your content only takes 50px, the browser will divide the remaining 50px by 2 and pad 25px on each side of your content to center it.
因此，如果您的 div 宽度为 100 像素，而您的内容仅占用 50 像素，则浏览器会将剩余的 50 像素除以 2，并在内容的每一侧填充 25 像素以使其居中。
回答by Dennis Traub
Spans are inline, divs are block elements. i.e. spans are only as wide as their respective content. You can align the span inside the surrounding container (if it's a block container), but you can't align the content.
Span 是内联的，div 是块元素。即跨度仅与其各自的内容一样宽。您可以对齐周围容器内的跨度（如果它是块容器），但不能对齐内容。
Span is primarily used for formatting purposes. If you want to arrange or position the contents, use div, p or some other block element.
Span 主要用于格式化目的。如果要排列或定位内容，请使用 div、p 或其他一些块元素。
回答by Dave G
Span is considered an in-line element. As such is basically constrains itself to the content within it. It more or less is transparent.
Span 被认为是一个内嵌元素。因此，它基本上将自己约束到其中的内容。它或多或少是透明的。
Think of it having the behavior of the 'b' tag.
想想它具有“b”标签的行为。
It can be performed like <span style='font-weight: bold;'>bold text</span>
它可以像 <span style='font-weight: bold;'>bold text</span> 一样执行
div is a block element.
div 是块元素。
回答by longi
It might be, because your span element sets is side as width as its content. if you have a div with 500px width and text-align center, and you enter a span tag it should be aligned in the center. So your problem might be a CSS one. Install Firebug at Firefox and check the style attributes your span or div object has.
可能是这样，因为您的 span 元素集的宽度与其内容一样。如果您有一个宽度为 500px 且文本居中对齐的 div，并且您输入了一个 span 标签，则它应该居中对齐。所以你的问题可能是一个 CSS 问题。在 Firefox 上安装 Firebug 并检查您的 span 或 div 对象具有的样式属性。
