如何在跨度中居中文本？答案

【问题标题】：How do I center text in a span?如何在跨度中居中文本？
【发布时间】：2020-11-02 19:00:21
【问题描述】：

请看this网站

如何让测试 TEST 位于它所包含的跨度的中间？

这是使用 Twitter Bootstrap。

我尝试了很多不同的方法，比如 css、内联样式、设置边距等，但我无法让 span 做我需要的事情。它看起来好像被绘制到文本的确切宽度。

我的主要目标实际上是能够将文本 Nationwide Alerts 向下显示，使其与按钮位于同一行。

棘手的是我不能给这个跨度一个硬编码的宽度，因为页面正在调整大小

保罗

【问题讨论】：

我没有点击链接（问题应该包含代码，不需要人们去外部网站，除了补充信息）但跨度默认情况下是内联的，并且居中文本仅在内部有意义显示块或具有固定宽度的元素。
在这种情况下，我会使用表格进行布局。我知道这很令人沮丧，但它会非常简单和干净。
HTML span align center not working?的可能重复

标签： html css

【解决方案1】：

只需补充一点，您现在可以简单地使用 css flexbox 将文本定位在任何元素内，包括跨度。

原始链接不再有效，但这应该使文本水平居中而不考虑元素的大小。

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

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

【讨论】：

【解决方案2】：

在 span 上加上背景颜色，看看它为什么不起作用。这三个项目在一个 div 中，没有与之关联的 CSS。为了使跨度位于中间，您需要围绕它的 div 至少具有 width 和 text-align 属性。

改变

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

此外，使用此标记，您的代码将导致跨度居中，但您必须将float:left 添加到您的btnPrevious id。除非您正在设计 HTML 电子邮件，否则我会尽可能避免使用内联 CSS，因此只需创建一个 CSS 文件，将 LAST 包含在您的 CSS 文件列表中，然后在其中添加您的编辑。

例如，如果btnPrevious 在您模板的 CSS 文件中，则在您的 CSS 文件中添加

#btnPrevious {
    float:left;
}

你很好。

编辑：

抱歉，我刚刚在您的代码中搜索了 TEST，因此错过了 Bootstrap 部分。 Bootstrap 是使用这些类构建的，并且这些类已经在容器中，您应该能够将 text-center 添加到空白 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="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>

【讨论】：

【解决方案3】：

正如您所怀疑的那样，跨度被绘制到其文本的确切宽度。您可以通过将其样式设置为display: block; width: 100%; 或您想要的任何宽度来规避此问题。这会弄乱您的情况，因为在 span 本身之前和之后还有其他元素。

因此，您还需要将其位置设置为绝对位置。

【讨论】：

【解决方案4】：

使用 bootstrap 2.3.0，有一个 .text-center 类可以使用 3

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

和一个以分页为中心的 bootstrap 3

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

【讨论】：

【解决方案5】：

你也可以使用

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

或者如果使用TailwindCSSmy-auto

【讨论】：