How do I horizontally center a span element inside a div

Solution 1:

Another option would be to give the span display: table; and center it via margin: 0 auto;

span {
    display: table;
    margin: 0 auto;
}

Solution 2:

One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

Solution 3:

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

Solution 4:

Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.

Works even on <span> tags.

Solution 5:

Spans can get a bit tricky to deal with. if you set the width of teach span you can use

margin: 0 auto;

to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.

Here is the jsfiddle I cam e up with off the top of my head: jsFiddle

EDIT:

Adrift's answer is the easiest solution :)