text-align: center Funktioniert nicht auf absolut positionierten Spannweiten

Question

Ich muss 2 <span> innerhalb einer <div> platzieren, die erste Spannweite muss oben platziert werden, die zweite unten, wie Nord-Süd.

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

Um dies zu tun, dachte ich über position:absolute; auf die 2 <span> verwenden.

div 
{ 
    display:inline-block; 
    width: 20px; 
    position:relative; 
    height:100px; 
} 
.north 
{ 
    position:absolute; 
    top:0; 
} 
.south 
{ 
    position:absolute; 
    bottom:0; 
} 

Nun sollten die Spannweiten nach links (Standard), positioniert werden, um sie zu zentrieren, habe ich:

div 
{ 
    text-align:center; 
} 

Aber ich habe dies:

prüfen es heraus: http://jsfiddle.net/Zn4vB/

Warum geschieht dieses?

Hinweis: Ich kann keine Ränder verwenden, links, rechts, weil der Inhalt dieser Bereiche unterschiedlich ist, ich muss sie nur in der Mitte richtig ausrichten.

Answer 1

http://jsfiddle.net/Zn4vB/1/

Das Problem ist, dass, sobald absolut positioniert, es folgt nicht mehr den Belegfluss. Der Text ist also zentriert, aber nur innerhalb der rosa Spanne. Und da es absolut positioniert ist, selbst wenn es ein Div wäre, würde die Breite zusammenbrechen.

Die Lösung besteht darin, den positionierten Spannen eine Breite von 100% zu geben und dann zu zentrieren.

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

Wenn Sie nicht die rosa wollen die volle Breite zu erweitern, müssen Sie nisten ein Element (zB Span) innerhalb der positioniert Spannweiten und geben diesem Element die Hintergrundfarbe, wie hier zu sehen: http://jsfiddle.net/Zn4vB/6/

Answer 2

Sie haben die Positionierung richtig. Aber <span> Tags sind Inline Elemente, so müssen Sie sie als Block-Level-Elemente mit display: block; anzeigen und dann explizit ihre Breite mit width: 100%; deklarieren.

Sie erben die text-align Eigenschaft von Ihrem Stil Regeln auf dem <div>, so dass der Text in der Mitte sein wird.

Ich habe hier Ihren Code eingeben aktualisiert: http://jsfiddle.net/robknight/Zn4vB/5/

Answer 3

bitte prüfen, ob dieses die Idee ist, Sie wollen ..

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 4

können Sie dieses Problem zu lösen, verwenden verwandeln

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