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

发布时间：2020-12-14 16:33:44 所属栏目：资源来源：网络整理

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

如何在“ 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 class="rotate">
      <div>ABC</div>
    </td>
    <td>123</td>
    <td class="rotate">
      <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 class="rotate">
            <div>ABC</div>
        </td>
        <td>123</td>
        <td class="rotate">
            <div>ABCDEFGHIJ</div>
        </td>
    </tr>
</table>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!