テキストをスパンの中央に配置するにはどうすればよいですか？

スパンに背景色を付けて、機能しない理由を確認します。これらの3つのアイテムは、CSSが関連付けられていないdivにあります。スパンを中央に配置するには、スパンを囲む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はこれらのクラスで構築されており、それらはすでにコンテナー内にある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>