Html “文本对齐：中心”在跨度元素中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25477765/
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
The "text-align: center" isn't working in a span element
提问by KarteMushroomPandas
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
我有一段时间没有使用 HTML 和 CSS，所以我可能忘记了一些东西，但由于某种原因，即使在最简单的上下文中，带有“text-align”属性集的“style”标签也不起作用。我将向您展示我拥有的整个文件，但我的问题仅存在于我的两个评论中。不要担心其他事情；这是我正在做的一个小小的激情项目。
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
所以这里是整个文件。我有很多不相关也不重要的东西；只关注两条注释中的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
“由AnnualMelons 编码”部分应该在中心，但事实并非如此。至少对我来说不是。
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
我知道文件的另一部分不相关，但我想我最好向您展示，因为它可能是一个外部问题。
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
我确定我只是犯了一个愚蠢的错误，因为我有一段时间没有这样做了，但它不起作用......所以是的。我使用 Firefox 作为我的网络浏览器，以防万一。
Thanks!
谢谢！
回答by Morklympious
The <span>Element is, by default, an "inline" element. Meaning unlike block level elements(<div><h1><p>etc.) the span only takes up as much horizontal space as its content.
该<span>元素是，在默认情况下，一个“内联”元素。这意味着与块级元素（<div><h1><p>等）不同，跨度仅占用与其内容一样多的水平空间。
text-align: centerIS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
text-align: center正在工作，但您将其应用于宽度不大于其内容的元素（就像所有块元素一样）。
I recommend either changing the span to a <p>element, or specifying the display: blockproperty on your span.
我建议要么将跨度更改为<p>元素，要么在跨度上指定display: block属性。
Here's a JSfiddle to demonstratethat both a <span>with display: block; text-align: centerand a <p>with text-align: center;achieve the same effect.
这是一个 JSfiddle 来演示a <span>withdisplay: block; text-align: center和 a <p>withtext-align: center;达到相同的效果。
Hope that helps!
希望有帮助！
回答by David
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
使用 ap 或 div 而不是跨度。文本是内联元素，跨度也是。要使 text-align 起作用，必须在块级元素（p、div 等）上使用它以将内联内容居中。
example:
例子：
<div style="text-align: center">Coded by AnnualMelons</div><br>
回答by Vivek Pandey
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
这对我有用，我的跨度标签内的文本现在与中心对齐。
回答by Shanaka Anuradha
Use this in style
使用这个风格
margin-left: 50%;
example-
例子-
<span style="margin-left: 45%;">Centered Text</span>
