centrum Pionowo obrócony tekst z CSS

Question

Mam następujące HTML:

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

div.outer jest wąski pasek pionowy. div.inner jest obrócony o 90 stopni. Chciałbym tekst "Wyśrodkowany?" pojawi się wyśrodkowany w swoim pojemniku div. Nie znam wielkości div z góry.

Zbliża się: http://jsfiddle.net/CCMyf/2/. Z jsfiddle widać, że tekst jest wyśrodkowany w pionie, zanim zostanie zastosowany styl transform: rotate(-90deg), ale po pewnym czasie jest nieco przesunięty. Jest to szczególnie zauważalne, gdy div.outer jest krótkie.

Czy można wyśrodkować ten tekst w pionie, nie znając żadnego z wcześniejszych rozmiarów? Nie znalazłem żadnych wartości transform-origin, które rozwiązałyby ten problem.

Answer 1

Kluczem jest ustalenie położenia górnej i lewej do 50%, a następnie transformX i transformY do -50%.

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

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

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

Answer 2

Czy możesz dodać margin: 0 auto; do swojej klasy "obracaj", aby wyśrodkować tekst.

.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

Usuwanie: margin-top: -7px; z .inner wykonane pionowo obrócony tekst wyśrodkowany dla mnie. Uczynił także tekst poziomy nie wyśrodkowany.

Wystarczy usunąć powyższy kod?

Answer 4

Można dodać to:

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

do funkcji .on('change'), jak widać tutaj: http://jsfiddle.net/darkajax/hVhbp/

Answer 5

To może być trochę za późno odpowiedzi na to pytanie, ale natknąłem się na tym samym numerze i znalazłem sposób, aby to osiągnąć, dodając kolejny element div.

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

i nakładanie text-align: center na tym środkowym elemencie, wraz z kilkoma pozycjonowania rzeczy:

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

.inner dostaje również display: inline-block; aby umożliwić zarówno rotate i text-align właściwości.

Oto odpowiedź skrzypce: http://jsfiddle.net/CCMyf/47/

Answer 6

Odpowiedź z „bjnsn” jest dobre, ale nie doskonałe, jak to się nie powiedzie, gdy tekst zawiera miejsca w nim. Na przykład użył "Centered"? jako tekst, ale jeśli zmieniliśmy tekst tak, aby przypuszczał, że jest "wyśrodkowany"? lub nie ", to nie będzie działać dobrze i zajmie następną linię po spacji. Ther nie określa szerokości ani wysokości dla wewnętrznego bloku div.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Ale możemy zrobić cały tekst wyśrodkowany align prawidłowo, ustawiając wewnętrzną szerokość div równą wysokości zewnętrznej div, line-wysokość wewnętrzna div równa szerokości zewnętrznej div i ustawienie właściwość display flex dla wewnętrznego elementu div z elementami align: center i justify-content: center properties.

.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'); 
}); 

aktualizowane skrzypce https://jsfiddle.net/touqeer_shakeel/cjL21of5/