html – 如何将转换后的旋转div居中？

概述如何在“ HTML”表的第一列和第三列中居中“ABC”和“ABCDEFGHIJ”文本？我尝试了HTML标签text-align,但我认为翻译阻止了这种对齐. td.rotate div { transform: translate(68px, 55px) rotate(270deg); white-space: nowrap; height: 150px; translate-or 如何在“ HTML”表的第一列和第三列中居中“ABC”和“ABCDEFGHIJ”文本？我尝试了HTML标签text-align,但我认为翻译阻止了这种对齐.

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 >      <div>ABC</div>    </td>    <td>123</td>    <td >      <div>ABCDEFGHIJ</div>    </td>  </tr></table>

解决方法 你可以使用这个神奇的片段来完全控制所有内容： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

它也适用于这种情况.子div将具有position：absolute,所以我们必须设置position：parent相对于parent,因此它们相对于它定位,而且parent也需要设置wIDth和height,因为内容不会再自动设置它.

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 >            <div>ABC</div>        </td>        <td>123</td>        <td >            <div>ABCDEFGHIJ</div>        </td>    </tr></table>

总结

以上是内存溢出为你收集整理的html – 如何将转换后的旋转div居中？全部内容，希望文章能够帮你解决html – 如何将转换后的旋转div居中？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。