centro verticale ruotato di testo con i CSS

Ho il seguente codice HTML: centro verticale ruotato di testo con i CSS

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

div.outer è una striscia verticale stretta. div.inner viene ruotato di 90 gradi. Vorrei il testo "Centrato?" apparire centrato nel suo contenitore div. Non conosco le dimensioni di entrambi i div in anticipo.

Questo è vicino: http://jsfiddle.net/CCMyf/2/. È possibile vedere dal jsfiddle che il testo è centrato verticalmente prima dell'applicazione dello stile transform: rotate(-90deg), ma in seguito è leggermente spostato. Ciò è particolarmente evidente quando div.outer è breve.

È possibile centrare questo testo verticalmente senza conoscere alcuna delle dimensioni in anticipo? Non ho trovato alcun valore di transform-origin che risolva questo problema.

fonte

2013-02-28 danvk

Sei invece di impostare 'visualizzazione: table' sugli elementi? Perché il modo "standard" per allineare verticalmente i div dinamici dovrebbe funzionare con la trasformazione senza problemi: http://stackoverflow.com/a/6182661/188221 – DigTheDoug

Non sono contrario a '' 'display: table'''. Questo violino mostra che la soluzione del tavolo ha gli stessi problemi di quella precedente: http://jsfiddle.net/4d384/ – danvk

Prova a mettere la classe 'ruvida' sull'elemento centrale. Dovrebbe farlo, ma sembra che incasini la larghezza dell'elemento. Potrebbe essere necessario giocare con il padding o la larghezza o l'altezza di oggetti di scena, ma dovrebbe essere possibile fare: http://jsfiddle.net/digthedoug/jWYuq/ – DigTheDoug

La chiave è di impostare posizione superiore e sinistra al 50% e quindi transformX e transformY a -50%.

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

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

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

fonte

2014-06-19 21:28:13 bjnsn

Questa è una delle migliori soluzioni che ho visto. Thx – grayson

È tardi la notte, non so perché funzioni, ma nel momento in cui ho premuto ctrl-R ... è raro che io abbia dei momenti così "funziona". La mia mascella è scesa in modo non figurato! – TotoTitus

Lavorando con gli elementi di testo anziché con le div, ho dovuto aggiungere 'margin: 0' sull'elemento interno per rendere perfettamente il centro del testo. – kapser

È possibile aggiungere margin: 0 auto; alla classe "rotazione" per centrare il testo.

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

fonte

2013-02-28 15:04:12 97ldave

Questo non funziona. Ecco il violino aggiornato con "margin: 0 auto": http://jsfiddle.net/CCMyf/3/. Puoi vedere che il "?" in "Centratura?" è molto più vicino alla cima rispetto alla "C" è verso il basso. – danvk

Rimozione: margin-top: -7px; dal .inner reso il testo verticalmente ruotato centrato per me. Ha anche reso il testo orizzontale non centrato.

Basta rimuovere il codice sopra?

fonte

2013-02-28 15:05:38 Michael

Questo potrebbe renderlo più vicino all'essere centrato, ma non è ancora centrato correttamente. Puoi vederlo chiaramente in questa versione del fiddle: http://jsfiddle.net/CCMyf/4/ – danvk

Si potrebbe aggiungere questo:

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

Per la funzione .on('change'), come potete vedere qui: http://jsfiddle.net/darkajax/hVhbp/

fonte

2013-02-28 15:08:25 DarkAjax

Questo funziona, anche se preferirei molto una soluzione CSS, se possibile. – danvk

hai trovato una soluzione CSS? – Crashalot

Può essere un po 'tardi per rispondere a questa domanda, ma ho inciampato sullo stesso argomento e trovato un modo per raggiungerlo, aggiungendo un altro div nel modo in cui.

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

e applicando una text-align: center su tale elemento intermedio, insieme ad alcune cose posizionamento:

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

Il .inner ottiene anche una display: inline-block; per consentire sia rotate e text-align proprietà.

Ecco corrispondente violino: http://jsfiddle.net/CCMyf/47/

fonte

2014-03-20 11:41:45

La risposta da 'bjnsn' è buono, ma non perfetto come non riesce quando il testo contiene spazio in esso. Ad esempio, ha usato "Centrato?" come testo ma se abbiamo cambiato il testo per far supporre 'centrato? o no 'allora non funzionerà bene e prenderà la linea successiva dopo lo spazio. Non è definita la larghezza o l'altezza per il blocco div interno.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Ma possiamo fare tutto il testo di allineamento centrato correttamente, impostando la larghezza div interno uguale all'altezza del div esterno, linea-altezza interna div pari alla larghezza della cornice div ed esterno la proprietà flex del display per div interno con gli elementi di allineamento: centro e giustificazione-contenuto: proprietà del centro.

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

aggiornato violino https://jsfiddle.net/touqeer_shakeel/cjL21of5/

fonte

2016-09-30 10:35:05 user3809178

centro verticale ruotato di testo con i CSS

risposta

Problemi correlati