HTML 跨度对齐中心不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8392211/
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
HTML span align center not working?
提问by David19801
I have some HTML:
我有一些 HTML：
<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>
The Div is changing the spacing on my document, so I want to use a span for this instead.
Div 正在更改我文档上的间距，因此我想为此使用跨度。
But span is not centralizing the contents:
但是跨度并没有集中内容：
<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>
How do I fix this?
我该如何解决？
EDIT:
编辑：
My complete code:
我的完整代码：
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<span style="border:1px solid red;text-align=center">
This is some text in a div element!
</span>
</body>
</html>
回答by Will
A div is a block element, and will span the width of the container unless a width is set. A span is an inline element, and will have the width of the text inside it. Currently, you are trying to set align as a CSS property. Align is an attribute.
div 是一个块元素，除非设置了宽度，否则它将跨越容器的宽度。span 是一个内联元素，其内部将具有文本的宽度。目前，您正在尝试将 align 设置为 CSS 属性。对齐是一个属性。
<span align="center" style="border:1px solid red;">
This is some text in a div element!
</span>
However, the align attribute is deprecated. You should use the CSS text-alignproperty on the container.
但是，不推荐使用 align 属性。您应该text-align在容器上使用 CSS属性。
<div style="text-align: center;">
<span style="border:1px solid red;">
This is some text in a div element!
</span>
</div>
回答by Chris J
Please use the following style. margin:autonormally used to center align the content. display:tableis needed for spanelement
请使用以下样式。margin:auto通常用于居中对齐内容。元素display:table需要span
<span style="margin:auto; display:table; border:1px solid red;">
This is some text in a div element!
</span>
回答by Lucifer Sam
The alignattribute is deprecated. Use CSS text-aligninstead. Also, the span will not center the text unless you use display:blockor display:inline-blockand set a value for the width, but then it will behave the same as a div (block element).
该align属性已弃用。改用 CSS text-align。此外，除非您使用display:block或display:inline-block设置宽度值，否则跨度不会使文本居中，但它的行为与 div（块元素）相同。
Can you post an example of your layout? Use www.jsfiddle.net
你能发布一个你的布局的例子吗？使用 www.jsfiddle.net
回答by AIMABLE
span.login-text {
font-size: 22px;
display:table;
margin-left: auto;
margin-right: auto;
}
<span class="login-text">Welcome To .....CMP</span>
For me it worked very well. try this also
对我来说，它工作得很好。也试试这个
回答by nhazean
On top of all the other explanations, I believe you're using equal "="sign, instead of colon ":":
除了所有其他解释之外，我相信您使用的是"="等号，而不是冒号":"：
<span style="border:1px solid red;text-align=center">
It should be:
它应该是：
<span style="border:1px solid red;text-align:center">
回答by mark stewart
Span is inline-block and adjusts to inline text size, with a tenacity that blocks most efforts to style out of inline context. To simplify layout style (limit conflicts), add div to 'p' tag with line break.
Span 是 inline-block 并根据内联文本大小进行调整，具有很强的抵抗力，可以阻止大多数尝试脱离内联上下文进行样式设置。为了简化布局样式（限制冲突），将 div 添加到带有换行符的 'p' 标签。
<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
回答by mon
Just use word-wrap:break-word;in the css. It works.
只需word-wrap:break-word;在css中使用。有用。
