HTML中的span居中对齐无效？

Question

HTML中的span居中对齐无效？

146

我有一些HTML：

<div align="center" style="border:1px solid red">
This is some text in a div element!
</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>

- David19801

1

你的 div 元素“改变了间距”？这是什么意思？因为默认情况下，你的 span 元素是内联元素，而 div 元素是块级元素，所以它不会有这个问题。 - Bojangles

你好，JamWaffles。所谓“spacing”，我是指该div在其内容上方和下方添加了空间。而span则不会这样做。 - David19801

使用Firebug或Chrome检查器查看应用于您的元素的CSS规则，并查找添加填充或边距的规则。周围的元素也可能具有填充/边距。 - Bojangles

6

“text-align=center” 应该改为 “text-align:center”。 - n611x007

7个回答

61

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

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

- Chris J

显示表格在Bootstrap 4输入组插件span中可用。 - Toma

43

align属性已被弃用，请使用CSS的text-align代替。此外，如果您不使用display:block或display:inline-block并设置宽度值，则标签无法使文本居中，但是这时它将与div（块级元素）的行为相同。

您能发布一下您布局的示例吗？请使用www.jsfiddle.net。

- Jeff Camera

1

非常好！谢谢。 - dallinchase

我能否在保持两个内联元素为内联元素的同时将它们对齐方式不同？ - user5306470

display:block会使文本换行。而inline-block根本不起作用。 - Hi-Angel

太好了，我找到了如何使它工作的方法，请看这里。基本上，解决方案是相反的：不是将要居中的文本居中，而是将不想居中的文本左对齐。@JeffCamera，您介意在您的答案中添加一个解决方案吗？ - Hi-Angel

16

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

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

对我来说非常有效。你也可以试试这个。

- AIMABLE

3

除了其他的解释之外，我认为你使用的是等于号"="，而不是冒号":"。

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

应该是：

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

- nhazean

1

是内联块元素，会自动适应内联文本的大小，且很难脱离内联上下文进行样式调整。为了简化布局样式（避免冲突），可以在“

”标签中添加带有换行符的

。

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

- mark stewart

-10

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

- mon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Will · Accepted Answer

是块级元素，如果没有设置宽度，将会跨越整个容器的宽度。而是内联元素，它的宽度取决于内部文字的宽度。目前，你正在尝试将对齐设置为CSS属性。对齐是一个属性而不是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>