text-align: center Mutlak konumlandırılmış açıklıklarda düzgün çalışmaz

Question

'un içine 2 <span> yerleştirmem gerekiyor, ilk açıklık en üstte, ikincisi de Kuzey-Güney gibi yerleştirilmelidir.

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

Bunu yapmak için

, ben 2 <span> üzerinde position:absolute; kullanma hakkında düşündük. Şimdi

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

, açıklıklı sola (varsayılan), bunları merkezi şekilde konumlandırılmalıdır, ben kullandı:

div 
{ 
    text-align:center; 
} 

Ama bu var:

Kontrolü Bunu yapmak için: http://jsfiddle.net/Zn4vB/

Bu neden oluyor?

Not: Kenar boşluklarını kullanamıyorum, sol, sağ, çünkü bu açıklıkların içeriği farklı olduğundan, bunları yalnızca merkezde hizalamam gerekiyor.

Answer 1

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

mesele artık doküman akışını izler, bir zamanlar kesinlikle yerleştirilmiş olmasıdır. Böylece metin ortalanmış, ancak sadece pembe açıklığın içinde. Ve kesinlikle konumlandığından, bir div olsa bile, genişlik çökecektir.

Bu çözüm, konumlandırılmış açıklıkları% 100 genişlik ve ardından merkezleme işlemlerini vermektir.

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

tam genişliğini uzatmak pembe istemiyorsanız burada görüldüğü gibi, o zaman iç içe bir konuma sahip açıklıklar içine eleman (örneğin yayılma) ve bu elemanının arka plan rengini vermek gerekir: http://jsfiddle.net/Zn4vB/6/

Answer 2

Konumlandırma hakkınız var. Ancak <span> etiketleri satır içi öğeleridir, bu nedenle display: block; ile blok düzeyindeki öğeler olarak görüntülenmelerini ve daha sonra genişliklerini width: 100%; ile açıkça belirtmeniz gerekir.

<div> adresindeki stil kurallarınızdan text-align özelliğini miras bırakacaklar, böylece metin merkezde olacak.

ben güncelledik burada kod: http://jsfiddle.net/robknight/Zn4vB/5/

Answer 3

bu bir istediğiniz bir fikir olup olmadığını kontrol edin ..

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

bu sorunu

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