如何在span中居中文本？

Question

请参见此网站 如何使 TEST 测试文本位于其所在的 span 的中间？

这是使用 Twitter Bootstrap。

我已经尝试了许多不同的方法，如 CSS、内联样式、设置边距等等，但我无法让该 span 执行我需要的操作。它似乎被绘制为其文本的确切宽度。

我的主要目标实际上是将“全国性警报”文本下移，以便与按钮处于同一行。

麻烦的是，由于页面大小可调整，因此我不能为这个 span 指定硬编码宽度。

保罗

- Paul

---

默认情况下，跨度元素是内联的，而使文本居中仅在显示为块级元素或具有固定宽度的元素内才有意义。我没有点击链接（问题应该包含代码，不应要求人们前往外部网站，除非是补充信息）。 - Mitya

在这种情况下，我会使用表格作为布局。我知道这被不鼓励之类的，但它会非常简单和清晰。 - MightyPork

可能是HTML span align center not working?的重复问题。 - underscore_d

Answer 1

只需使用CSS flexbox即可将文本定位在任何元素内，包括span元素。

原始链接已失效，但这应该可以水平居中文本，而不管元素的大小。

span { display: flex; 
       justify-content: center }

如果你想要垂直对齐，请使用align-items: center。

- Hideaki

---

我可能错了，但我认为如果文本换行的话，这种方法就不起作用了。在这种情况下，使用 text-align: center; 可能更好。 - Joseph Beuys' Mum

Answer 2

在span上放置背景颜色可以看出为什么它不起作用。这三个项目都在一个没有CSS的div中。为了使span居中，你需要包围它的div至少具有宽度和文本对齐属性。

更改

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

        <div class="centerTest">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

使用任何您想要并且可以使用的名称

.centerTest {
    width:100%;
    text-align:center;
}

此标记将导致您的代码将 span 居中，但是您需要向您的 btnPrevious id 添加 float:left。除非您正在设计 HTML 电子邮件，否则应尽可能避免使用内联 CSS，因此请创建一个 CSS 文件，将其包含在您的 CSS 文件列表的最后，并在其中添加编辑内容。例如，如果 btnPrevious 在模板的 CSS 文件中，则在您的 CSS 文件中只需添加：

#btnPrevious {
    float:left;
}

而且你做得很好。

编辑：

对不起，我错过了Bootstrap部分，因为我只是在你的代码中搜索了TEST。Bootstrap是使用这些类构建的，并且由于这些类已经存在于一个容器中，您应该能够将text-center添加到空白的

中，这样就可以解决问题了。

更改：

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

到

        <div class="text-center">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

- badfilms

Answer 3

使用bootstrap 2.3.0，有一个.text-center类可供使用。

<span class="text-center">...</span>

以及适用于Bootstrap 3的分页居中

<span class="pagination-centered">...</span>

- Coding Enthusiast

Answer 4

Spans就像你所怀疑的那样，它的宽度是根据其文本内容精确绘制的。您可以通过将其样式设置为display:block;width:100%或其他任何宽度来规避此问题。但是，在您的情况下，这会破坏之前和之后的其他元素。因此，您还需要将其位置设置为绝对定位。

- Emil

Answer 5

你也可以使用

margin-top: auto;
margin-bottom: auto;

或者如果使用 TailwindCSS，可以使用 my-auto

- user1665355