text-align: center Nie działa poprawnie na pozycjach bezwzględnie rozmieszczonych

Question

Muszę umieścić 2 <span> wewnątrz <div>, pierwsza rozpiętość musi być umieszczona na górze, druga na dole, podobnie jak północ-południe.

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

Aby to zrobić, myślałem o użyciu position:absolute; na 2 <span>.

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

Teraz przęsła powinny być umieszczone po lewej stronie (domyślnie), aby ich środek, użyłem:

div 
{ 
    text-align:center; 
} 

Ale mam to:

Sprawdź to: http://jsfiddle.net/Zn4vB/

Dlaczego to się dzieje?

Uwaga: Nie mogę używać marginesów, lewy, prawy, ponieważ zawartość tych przęseł jest różna, wystarczy je odpowiednio wyrównać w środku.

Answer 1

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

Problem jest, że raz pozycjonowany bezwzględnie, to już nie następuje przepływ dokumentów. Więc tekst jest wyśrodkowany, ale tylko wewnątrz różowej przęsła. A ponieważ jest absolutnie umiejscowiony, nawet jeśli byłby div, szerokość by się zawaliła.

Rozwiązaniem jest nadanie rozmieszczonych przęseł szerokości 100%, a następnie wyśrodkowanie.

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

Jeśli nie chcesz różowy rozszerzyć się na całą szerokość, to musi zagnieździć element (np rozpiętość) umieszczonymi wewnątrz przęseł i dać ten element kolor tła, jak widać tutaj: http://jsfiddle.net/Zn4vB/6/

Answer 2

Masz prawo pozycjonowania. Ale znaczniki <span> są elementami w linii, więc musisz je wyświetlić jako elementy blokowe z display: block;, a następnie jawnie zadeklarować ich szerokość za pomocą width: 100%;.

Będą dziedziczyć własność text-align zgodnie z regułami stylu na <div>, aby tekst znajdował się pośrodku.

Mam zaktualizowany kod tutaj: http://jsfiddle.net/robknight/Zn4vB/5/

Answer 3

proszę sprawdzić, czy ten jest idea chcesz ..

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

można użyć przekształcić się rozwiązać ten problem

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