Css 文本对齐：在绝对定位跨距上居中工作不正常

我需要将2个

放置在

内，第一个跨度必须放置在顶部，第二个跨度必须放置在底部，如南北

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

现在，跨距应该定位在左侧（默认），要使跨距居中，我使用了：

div
{
    text-align:center;
}

但我明白了：

请查看：

为什么会这样

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

问题是，一旦绝对定位，它就不再遵循文档流。因此文本居中，但仅在粉红色范围内。因为它是绝对定位的，即使它是一个div，宽度也会崩溃

解决方案是为定位跨距提供100%的宽度，然后对中工作

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

---

如果您不希望粉色延伸整个宽度，则必须在定位的跨距内嵌套一个元素（例如，跨距），并为该元素提供背景色，如图所示：

您已正确定位。但是

标记是内联元素，因此需要使用

display:blockwidth:100%显式声明其宽度

它们将从
上的样式规则中继承
文本对齐
属性，因此文本将位于中间

我已在此处更新了您的代码：
请检查此代码是否符合您的想法

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;
}

您可以使用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%);
}

一旦绝对定位，就不需要将其声明为块。只是澄清一点。
 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%);
}