css - 文本对齐 :center Not working properly on absolute positioned spans

Question

我需要放置 2 <span>在 <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，宽度也会崩溃。

解决方案是给定位的 span 一个 100% 的宽度，然后居中工作。

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

如果您不希望粉红色扩展到整个宽度，那么您必须在定位的跨度内嵌套一个元素(例如跨度)并为该元素赋予背景色，如下所示:http://jsfiddle.net/Zn4vB/6/