text-align：center在绝对定位跨度上不能正常工作

Question

我需要在<span>内放置2 <div>，第一个跨度必须放在顶部，第二个跨度放在底部，如南北。

<div>
    <span class="north">N</span>
    <span class="south">S</span>
</div>

为此，我考虑在2 position:absolute;上使用<span>。

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

现在，跨度应该位于左侧（默认），以使它们居中，我使用：

div
{
    text-align:center;
}

但我得到了这个：

检查出来：http://jsfiddle.net/Zn4vB/

为什么会发生这种情况？

注意：我不能使用左，右边距，因为这些跨距的内容不同，我只需要在中心正确对齐它们。

Answer 1

http://jsfiddle.net/Zn4vB/1/

问题在于，一旦绝对定位，它就不再遵循文档流程。所以文本居中，但只在粉红色范围内。而且由于它绝对定位，即使它是一个div，宽度也会崩溃。

解决方案是使定位的跨度为100％宽度然后居中工作。

span
{
    background-color:pink;
    left: 0;
    width: 100%;
}

如果您不希望粉红色延伸整个宽度，那么您必须在定位的跨度内嵌套元素（例如跨度）并为该元素提供背景颜色，如下所示：http://jsfiddle.net/Zn4vB/6/

Answer 2

请检查这个是否是您想要的想法..

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
    border-style:solid;
}
span
{
    background-color:pink;
    width:100%;
    text-align:center;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

Answer 3

你有正确的定位。但<span>代码是内嵌元素，因此您需要将它们显示为display: block;的块级元素，然后使用width: 100%;显式声明其宽度。< / p>

他们将从text-align上的样式规则继承<div>属性，因此文本将位于中心。

我在这里更新了您的代码：http://jsfiddle.net/robknight/Zn4vB/5/