如何在跨度中居中显示文本？

Question

请浏览这个网站

如何使测试TEST处于包含范围的中间？

这是使用Twitter Bootstrap。

我尝试了不同方式的负载，例如CSS，内联样式，设置边距等，但是我无法获得跨度来做我需要的事情。好像它被绘制到其文本的确切宽度一样。

我的主要目的实际上是为了使Nationwide Alerts（全国警报）文本降低，使其与按钮位于同一行。

棘手的是，由于页面正在调整大小，因此我无法为该范围设置硬编码宽度

保罗

Answer 1

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

原始链接不再有效，但无论元素大小如何，这都应将文本水平居中。

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

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

Answer 2

在跨度上放置背景颜色，以查看为什么它不起作用。这三个项目位于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到btnPreviousID中。除非您正在设计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>