如何将span元素居中放置在CSS中？

Question

我有三个<span>元素，我想要水平放置一个接一个。我还需要中间元素位于页面的中心（水平方向），但margin:auto; width: 100px不起作用，因为它是<span>。如果我使它<div>，有一个换行符。

我该如何解决这个问题？

Answer 1

我会使用100px的宽度的三个相同span元素，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; 
} 

Answer 2

如果您创建一个div并将其设置为具有100％的宽度。在这次潜水中，您创建3个div;每个元素一个。如果你设置每个元素的宽度为33.3％，那么它将相应地居中居中和居中。就像明智一样，你可以增加利润来减少33.3％。例如，保证金：0 3％0 3％在中央股利会给它左边和右边3％的保证金。减去从DIV宽度的大小为6％，因为它必须总是合计100％

Answer 3

span是一个内联元素，所以它的行为不像div这是一个块元素。

我建议做一个混合的浮动和对齐中心。

实施例：

HTML

<span class="block element3">ELEMENT3</span> 
<span class="block element1">ELEMENT1</span> 
<span class="block element2">ELEMENT2</span> 

CSS

.block { 
    display: block; 
    width: 100px; 
} 
.element3 { 
    float: right; 
    background-color: red; 
} 
.element2 { 
    float: left; 
    background-color: green; 
} 
.element1 { 
    text-align: center; 
    background-color: blue; 
    width: auto; 
} 

UPDATE：

http://jsfiddle.net/YUCv2/1/