Vertically Mitte gedreht Text mit CSS

Question

Ich habe folgende HTML:

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

div.outer ist ein schmaler vertikalen Streifen. div.inner ist um 90 Grad gedreht. Ich hätte gerne den Text "Zentriert?" in seinem Container div erscheinen. Ich kenne die Größe von Div im Voraus nicht.

Dies kommt in der Nähe: http://jsfiddle.net/CCMyf/2/. Sie können von der jfiddle sehen, dass der Text vertikal zentriert ist, bevor der transform: rotate(-90deg) Stil angewendet wird, aber nach etwas versetzt ist. Dies ist besonders auffällig, wenn div.outer kurz ist.

Ist es möglich, diesen Text vertikal zu zentrieren, ohne eine der Größen im Voraus zu kennen? Ich habe keine Werte von transform-origin gefunden, die dieses Problem lösen.

Answer 1

Der Schlüssel ist Lage oben zu setzen und zu 50% belassen und dann transformX und transformY bis -50%.

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

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

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

Answer 2

Können Sie margin: 0 auto; zu Ihrer "Rotate" -Klasse hinzufügen, um den Text zu zentrieren.

.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

Entfernen: margin-top: -7px; aus .inner machte die vertikal gedreht Text für mich zentriert. Außerdem wurde der horizontale Text nicht zentriert.

Entfernen Sie einfach den obigen Code?

Answer 4

Sie könnten hinzufügen:

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

Um Ihre .on('change') Funktion, wie Sie hier sehen können: http://jsfiddle.net/darkajax/hVhbp/

Answer 5

Es kann für die Beantwortung dieser Frage ein bisschen spät, aber ich stolperte über das gleiche Thema und einen Weg gefunden, es zu erreichen, indem man ein weiteres div hinzufügt.

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

und text-align: center auf diesem mittleren Elemente Anwendung, zusammen mit einiger Positionierung Zeug:

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

Die .inner bekommt auch eine display: inline-block; beide rotate und text-align Eigenschaften zu ermöglichen.

Hier ist die entsprechende Geige: http://jsfiddle.net/CCMyf/47/

Answer 6

Die Antwort von ‚bjnsn‘ gut, aber nicht perfekt, wie es schlägt fehl, wenn der Text Leerzeichen enthält darin. Zum Beispiel hat er 'Zentriert?' als Text, aber wenn wir den Text änderten, um "Zentriert" annehmen zu lassen? oder nicht 'dann wird es nicht gut funktionieren und wird die nächste Zeile nach dem Platz nehmen. Für den inneren Div-Block ist keine Breite oder Höhe definiert.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Aber wir können den ganzen Text zentrierte ausrichten richtig machen, indem die innere div Breite gleich Höhe der äußeren div Einstellung, Zeilenhöhe der inneren div gleich die Breite der äußeren div und Einstellung die Eigenschaft display flex für das innere div mit align-items: center und justify-content: center-Eigenschaften.

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

aktualisiert Geige https://jsfiddle.net/touqeer_shakeel/cjL21of5/