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

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