Question

我有一些HTML：

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

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

但是跨度并没有集中内容：

<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>

Answer 1

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

<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>

Answer 2

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

需要span

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

Answer 3

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

您可以发布布局示例吗？使用www.jsfiddle.net

Answer 4

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

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

对我而言，它的效果非常好。试试这个

Answer 5

Span是内联块并调整为内联文本大小，其强度可阻止大多数内联上下文的样式。要简化布局样式（限制冲突），请使用换行符将div添加到“p”标记。

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

Answer 6

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

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

应该是：

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

Answer 7

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

HTML span align center无法正常工作？

7 个答案: