Come si centra un div trasformato e ruotato?

Question

Come si concentra il testo "ABC" e "ABCDEFGHIJ" nelle colonne uno e tre di questa tabella HTML? Ho provato il tag HTML text-align, ma penso che il traduttore stia impedendo questo allineamento.

td.rotate div { 
 
    transform: translate(68px, 55px) rotate(270deg); 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    translate-origin: left top; 
 
    width: 25px; 
 
    text-align: center; 
 
}

<table border="2px"> 
 
    <tr> 
 
    <td class="rotate"> 
 
     <div>ABC</div> 
 
    </td> 
 
    <td>123</td> 
 
    <td class="rotate"> 
 
     <div>ABCDEFGHIJ</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

È possibile centrare assolutamente tutto con questo frammento di magia: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Funziona in questo caso. I bambini divs avranno position: absolute, quindi dobbiamo impostare position: relative per genitore in modo che siano posizionati relativamente ad esso, e anche il genitore deve avere larghezza e altezza impostate poiché il contenuto non lo imposterà più automaticamente.

td.rotate { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 15px; 
 
} 
 

 
td.rotate div { 
 
    transform: translate(-50%, -50%) rotate(270deg); 
 
    white-space: nowrap; 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    text-align: center; 
 
}

<table border="2px"> 
 
    <tr> 
 
     <td class="rotate"> 
 
      <div>ABC</div> 
 
     </td> 
 
     <td>123</td> 
 
     <td class="rotate"> 
 
      <div>ABCDEFGHIJ</div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

Ok così invece di manupulating il codice, ho preso un paio di passi indietro e ha riscritto quarantina, cercando di mantenere la struttura generale in tatto. Cosa succede se, invece del css rotante che hai scritto, abbiamo fatto qualcosa di simile a un semplice transform: rotate(-90deg); sul con il testo. Quindi basta estendere l'altezza dei tag <td> un po '.

HTML

<table border="2px"> 
    <tr> 
    <td> 
     <div class="rotateText">ABC</div> 
    </td> 
    <td>123</td> 
    <td> 
     <div>ABCDEFGHIJ</div> 
    </td> 
    </tr> 
</table> 

CSS

.rotateText{ 
    -webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
transform: rotate(-90deg); 
} 
td{ 
    height:100px; 
} 

e, infine, il JS JIDDLE

Answer 3

Si può anche utilizzare writing-mode

https://www.w3.org/TR/css-writing-modes-3/ astratta

CSS scrittura Modalità livello 3 definisce il supporto CSS per varie modalità di scrittura internazionali, come ad esempio da sinistra a destra (per esempio Latino o Indic), da destra a sinistra (ad esempio ebraico o arabo), bidirezionale (ad esempio misto latino e arabo) e verticale (ad esempio script asiatici).

td.rotate div { 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    width: 25px; 
 
    text-align:center; 
 
    -webkit-writing-mode: vertical-lr; 
 
    /* old Win safari */ 
 
    writing-mode: vertical-rl; 
 
    writing-mode: tb-lr; 
 
    /* writing-mode:sideways-lr;should be the one */ 
 
    /* eventually untill sideways-lr is working everywhere we can use transform , comment or remove next line to understand what it does :) */ 
 
    transform: scale(-1, -1); 
 
}

<table border="2px"> 
 
    <tr> 
 
    <td class="rotate"> 
 
     <div>ABC</div> 
 
    </td> 
 
    <td>123</td> 
 
    <td class="rotate"> 
 
     <div>ABCDEFGHIJ</div> 
 
    </td> 
 
    </tr> 
 
</table>