S B S B - 5 months ago 19
HTML Question

How do I center a transformed and rotated div?

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



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

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>

Comments