css - HTML span align center无法正常工作?

我有一些HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div正在改变文档的间距,所以我想用它来代替。

但是span并没有集中内容:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

我该如何解决?

编辑:

我的完整代码:

<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>
David19801 asked 2019-08-13T12:02:58Z
7个解决方案
172 votes

div是块元素,除非设置了宽度,否则将跨越容器的宽度。 span是一个内联元素,将包含其中文本的宽度。 目前,您正在尝试将align设置为CSS属性。 对齐是一个属性。

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

但是,不推荐使用align属性。 您应该在容器上使用CSS text-align属性。

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
Will answered 2019-08-13T12:03:20Z
38 votes

请使用以下样式。 margin:auto通常用于居中对齐内容。 span元素需要display:table

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
Chris J answered 2019-08-13T12:03:47Z
26 votes

不推荐使用align属性。 请改用CSS text-align。 此外,除非您使用display:blockdisplay:inline-block并为宽度设置值,否则跨度不会使文本居中,但它的行为与div(块元素)相同。

你能发布一个布局的例子吗? 使用www.jsfiddle.net

Lucifer Sam answered 2019-08-13T12:04:22Z
8 votes
span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

对我而言,它运作良好。 试试这个

AIMABLE answered 2019-08-13T12:04:49Z
0 votes

Span是内联块并调整为内联文本大小,其强度可阻止大多数内联上下文的样式。 要简化布局样式(限制冲突),请将div添加到&#39; p&#39; 标记与换行符。

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
mark stewart answered 2019-08-13T12:05:18Z
-1 votes

除了所有其他解释之外,我相信您使用相同的"="标志,而不是冒号":"

<span style="border:1px solid red;text-align=center">

它应该是:

<span style="border:1px solid red;text-align:center">
nhazean answered 2019-08-13T12:05:47Z
-5 votes

只需在css中使用word-wrap:break-word;即可。 有用。

mon answered 2019-08-13T12:06:16Z
translate from https://stackoverflow.com:/questions/8392211/html-span-align-center-not-working