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

Question

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

<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 /

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%;明确声明它们的width: 100%; 。

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

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

Answer 4

你可以使用transform来解决这个问题

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