How do I center a transformed and rotated div?

Question

How do I center text "ABC" and "ABCDEFGHIJ" in columns one and three of this HTML table? I tried HTML tag text-align, but I think the translate is preventing that alignment.

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>

score 5 · Accepted Answer · answered Jun 23 '16 at 17:12

You can center absolutely everything with this magic snippet: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

It works in this case as well. Children divs will have position: absolute, so we have to set position: relative for parent so they are positioned relatively to it, and also parent needs to have set width and height since content will no more automatically set it.

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>

score 1 · Answer 2 · answered Jun 23 '16 at 17:15

Ok so instead of manupulating your code, I took a couple steps back and rewrote somethings, trying to keep your general structure in tact. What if, instead of the rotating css you wrote, we did something like just a simple transform: rotate(-90deg); on the <div> with the text. Then just extend the height of the <td> tags a little bit.

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

and finally, the JS JIDDLE

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

You may also use writing-mode

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

CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

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>

How do I center a transformed and rotated div?

3 Answers3

Linked