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

Question

我需要将2 <span>放在a内<div>,第一个跨度必须放在顶部,第二个跨度放在底部,如南北.

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

为此,我考虑使用position:absolute;2 <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%;
}

如果你不希望粉红色扩展整个宽度,那么你必须在定位的跨度内嵌套一个元素(例如span)并给该元素提供背景颜色,如下所示:http://jsfiddle.net/Zn4vB/ 6 /