How to center a span element in CSS?

css, html

Solution

I would use three identical `span` elements of 100px width, with `display: inline-block` nested inside a `div` with `text-align` set to center: http://jsfiddle.net/e9sru/

HTML:

<div id="container">
    <span class="inner">
        <div class="overflow">Lorem ipsum dolor est mori. I am overflowing but still to the left of number two</div>
    </span>
    <span class="inner">Two</span>
    <span class="inner">Three</span>
</div>

CSS:

#container {
    text-align: center;
}

.inner {
    display: inline-block;
    position: relative;
}

.overflow {
    float: right;
}

Problem

I have three `<span>` elements that I want to place horizontally one after the other. I also need the middle element to be at the center of the page (horizontally), but `margin:auto; width: 100px` is not working since it is a `<span>`. If I make it `<div>`, there is a line break. How do I solve this problem?

Original source