Html – How to center text in a span


Please see this website

How do I get the test TEST to be in the middle of the span it is contained in?

This is using Twitter Bootstrap.

I have tried loads of different ways, like css, inline styling, setting margins, etc but I cannot get the span to do what I need. It appears as though its being drawn to the exact width of it's text.

My main aim is actually to be able to bring the text Nationwide Alerts down so that it is on the same row as the buttons.

The tricky thing is that I cant give this span a hard coded width because of the page being resized


Best Answer

Just adding that you can now simply use css flexbox to position text inside any element including spans.

The original link is no longer working, but this should center the text horizontally regardless of the size of the element.

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

If you want to align vertically, use align-items: center