为什么 css text-align:center 不是居中文本？相同格式的下划线有效

Question

我编写了简单的 CSS 以使用 w3schools 示例对齐文本：

text-align:center

当我以相同的格式添加下划线时，下划线起作用了。

这是片段：

.CenterIt {
 text-align:center;
}
.UnderlineIt {
 text-decoration:underline;
}

<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>

这是 w3schools 页面（对齐文本部分）： https://www.w3schools.com/css/css_align.asp

在我的完整代码中，我将文本放在另一个框中。我已经在那个盒子里面和任何盒子外面都试过了。它不居中。

Answer 1

试试这个。您需要用 <div>

的容器单元包装它

<div class="UnderlineIt">
    <div class="CenterIt">Registration Form</div>
</div>

以下方法也有效

<span class="UnderlineIt">
    <div class="CenterIt">Registration Form</div>
</span>

Answer 2

如果你运行 “display: flex;” 可能会更好在容器跨度和“justify-content: center;”在子跨度上。在容器中放置项目时，Flexbox 更容易使用。

Answer 3

因为您的html格式不对。你不能有跨度的跨度子。

这样试试：

<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>

要使跨度居中，没有父级 div，您需要将显示作为块放置。所以你可以像这样在 html 和 css 上设置：

span{display:block;}


 .CenterIt {
    text-align:center;
}
.UnderlineIt {
    text-decoration:underline;
}

html:

<span class="UnderlineIt CenterIt">Registration Form</span>

Answer 4

.CenterIt {
 text-align:center;
  display:block;
}
.UnderlineIt {
 text-decoration:underline;
}

<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>

span的显示属性默认为inline。即，

display:inline;

因此，<span> 将只占用其内容的宽度。相比之下，block 元素，如 <div>，默认情况下，其内容采用整行（因此也是页面的整个宽度）。

要使 <span> 的文本对齐正常工作，您需要将其更改为 block 元素。

设置

display: block;

对于 span 和 .CenterIt class。这将使 .CenterIt 占据整行（从而占据页面的整个宽度），然后 text-align: center; 将内容集中。

Why is css text-align:center, not centering text? Underlining in the same format is working