css - text-align：center絶対位置のスパンで正しく機能しない

Question

2<span>を内側<div>に配置する必要があります。最初のスパンは上に配置し、2番目のスパンは南北のように下に配置する必要があります。

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