Dikey merkez CSS

Question

ile metin döndürülmüş Aşağıdaki HTML vardır:

<div class="outer"> 
    <div class="inner rotate">Centered?</div> 
</div> 

div.outer dar dikey bir şerit. div.inner, 90 derece döndürülür. "Merkezlenmiş" metnini ister misiniz? konteyner div içinde ortalanmış görünmek için. Önceden div'in boyutunu bilmiyorum.

Bu yakın geliyor: http://jsfiddle.net/CCMyf/2/. Jsfiddle öğesinden, metnin transform: rotate(-90deg) stili uygulanmadan önce dikey olarak ortalandığını görebilirsiniz, ancak bir süre sonra dengelenir. Bu özellikle div.outer'un kısa olduğu zaman fark edilir.

Bu yazı, boyutlardan herhangi birini önceden bilmeden dikey olarak ortalamak mümkün mü? Bu sorunu çözen transform-origin hiçbir değer bulamadım.

Answer 1

anahtar transformX ve transformY -50%, daha sonra pozisyonu üstten ayarlamak ve% 50 sol ve etmektir:

Burada karşılık gelen keman olduğunu.

.inner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.rotate { 
    transform: translateX(-50%) translateY(-50%) rotate(-90deg); 
} 

bkz: http://jsfiddle.net/CCMyf/79/

Answer 2

Metni ortalamak için "rotate" sınıfınıza margin: 0 auto; ekler misiniz?

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -ff-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    width: 16px; /* transform: rotate() does not rotate the bounding box. */ 
    margin: 0 auto; 
} 

Answer 3

Çıkarma: .inner den margin-top: -7px; benim için merkezli dikey döndürülmüş metin yaptı. Ayrıca yatay metni ortalamamıştır.

Sadece yukarıdaki kodu kaldırın? Burada gördüğünüz gibi, sizin .on('change') fonksiyonu için

$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height()); 

:

Answer 4

Bu ekleyebilir http://jsfiddle.net/darkajax/hVhbp/

Answer 5

O soruya cevap için biraz geç olabilir ama aynı konuyla ilgili tökezledi ve yolunda başka bir div ekleyerek bunu başarmanın bir yolunu buldu.

<div class="outer"> 
    <div class='middle'><span class="inner rotate">Centered?</span></div> 
</div> 

ve bazı konumlandırma malzeme ile birlikte, bu orta parça üzerine bir text-align: center uygulanması

:

.middle { 
    margin-left: -200px; 
    width: 400px; 
    text-align: center; 
    position: relative; 
    left: 7px; 
    top: 50%; 
    line-height: 37px; 
} 

.inner da display: inline-block; hem rotate ve text-align özelliklerini sağlamak için alır. http://jsfiddle.net/CCMyf/47/

Answer 6

metin içinde boşluk içerdiğinde başarısız olarak 'bjnsn' dan cevap iyi ama mükemmel değil. Mesela 'Merkezlenmiş?' metin olarak, ancak metni 'Merkezlenmiş' varsaymak için değiştirdik mi? ya da değil 'o zaman iyi çalışmayacak ve uzaydan sonraki sıraya geçecek. Ther, iç div bloğu için tanımlanmış genişlik veya yükseklik değildir.

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: #DDD; 
} 

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Ama dış div yüksekliği, hat-yüksekliğine eşit iç div genişliğini ayarlayarak, uygun bir şekilde bütün metin merkezli hizalama yapabilir iç dış div ve ayar genişliğine eşit div hizalama öğeleri ile iç div için ekran esnek özelliği: merkez ve haklı içerik: merkez özellikleri. elemanlarında table`:

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    line-height:40px; 
} 
$('#height').on('change', function(e) { 
    $('.outer').css('height', $('#height').val() + 'px'); 
    $('.inner').css('width', $('#height').val() + 'px'); 
}); 

güncellenmiş keman https://jsfiddle.net/touqeer_shakeel/cjL21of5/