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

如果您不希望粉红色扩展整个宽度，则必须在定位的跨度内嵌套一个元素（例如跨度）并为该元素提供背景色，如下所示：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%;.

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

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

Answer 4

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

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