Question

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

如何解决这个问题？

Answer 1

我会使用三个相同的span元素，宽度为100px，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％。例如，保证金：中心div上的3 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;
}

<强>更新

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

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

3 个答案: