Geek Answers Handbook

How to center a converted and rotated div?

How do I place the text "ABC" and "ABCDEFGHIJ" in the columns one and three of this HTML table? I tried the text-align HTML tag, but I think the translation prevents 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>
+8
html css
source share
3 answers

You can fully focus on this magical fragment: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

It works in this case too. Children divs will have position: absolute , so we need to set position: relative for the parent so that they are positioned relative to it, and the parent must have the width and height set, as the content will no longer 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>
+5
source share

So, instead of manipulating your code, I took a couple of steps back and rewrote something, trying to keep your overall structure in tact. What to do if instead of rotating css you wrote, we did something like a simple transform: rotate(-90deg); on the <div> with the text. Then slightly increase the height of the <td> tags.

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 JS JIDDLE

+1
source share

You can 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 Index), 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>
+1
source share

More articles:


All Articles