如何居中变换和旋转的div? [英] How do I center a transformed and rotated div?

问题描述

如何在此HTML表的第一和第三栏中将文本"ABC"和"ABCDEFGHIJ"居中?我尝试了HTML标签text-align，但是我认为翻译阻止了这种对齐方式.

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>

推荐答案

您可以使用此魔术代码段将所有内容绝对居中:

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

在这种情况下也可以使用.子级 divs 将具有 position:absolute ，因此我们必须为父级设置 position:relative ，以便它们相对于父级也位于相对位置需要设置宽度和高度，因为内容将不再自动设置.

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>

这篇关于如何居中变换和旋转的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！