如何将CSS中的span元素居中？

Question

我有三个<span>元素,我想一个接一个地水平放置.我还需要将中间元素放在页面的中心(水平),但margin:auto; width: 100px由于它是a ,因此不能正常工作<span>.如果我这样做<div>,就会有一个换行符.

我该如何解决这个问题？

Answer 1

我将使用三个相同的span100像素宽的元素,具有display: inline-block嵌套的内侧的div与text-align设置为中心: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;
}