CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3253

How do I 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

Paul

Upvotes: 26

Views: 166346

Answers (5)

user1665355
user1665355

Reputation: 3393

You can also use

margin-top: auto;
margin-bottom: auto;

Or if using TailwindCSS my-auto

Upvotes: 0

Hideaki
Hideaki

Reputation: 427

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

Upvotes: 36

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

Using bootstrap 2.3.0, there is a .text-center class you can use 3

<span class="text-center">...</span>

and a pagination-centered for bootstrap 3

<span class="pagination-centered">...</span>

Upvotes: 1

badfilms
badfilms

Reputation: 4507

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>

Upvotes: 16

Emil
Emil

Reputation: 7256

Spans are, as you suspected, drawn to the exact width of it's text. You can circumvent this by setting it's style to display: block; width: 100%;, or any width you would like. This will mess up everything in your case, since you have other elements before and after the span itself.

Therefor you'll need to in addition set it's position to absolute.

Upvotes: 1

Related Questions