How do I center text in a span?

Put a background color on the span to see why it isn’t working. Those three items are in a div with no CSS associated with it. In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties.

Change

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

to

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

with whatever name you want & use

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

Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:left to your btnPrevious id. I would refrain, as much as possible, from using inline CSS unless you are designing HTML email, so just create a CSS file that you include LAST in your list of CSS files and add your edits to there.

For example, if btnPrevious is in your template’s CSS file, in YOUR CSS file, just add

#btnPrevious {
    float:left;
}

and you’re good.

EDIT:

Sorry missed the Bootstrap part as I just did a search for TEST inside your code. Bootstrap is built with these classes, and being that those are already inside of a container, you should be able to add text-center to the blank div and it should do the trick

Change

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

to

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