Question

如何集中文字＆＃34; ABC＆＃34;和＆＃34; ABCDEFGHIJ＆＃34;在这个HTML表的第一列和第三列？我尝试了HTML标签text-align，但我认为翻译阻止了这种对齐。

＆＃13;

td.rotate div {
  transform: translate(68px, 55px) rotate(270deg);
  white-space: nowrap;
  height: 150px;
  translate-origin: left top;
  width: 25px;
  text-align: center;
}

＆＃13;

<table border="2px">
  <tr>
    <td class="rotate">
      <div>ABC</div>
    </td>
    <td>123</td>
    <td class="rotate">
      <div>ABCDEFGHIJ</div>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

你可以使用这个神奇片段绝对中心：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

它也适用于这种情况。子divs将position: absolute，因此我们必须为父级设置position: relative，以便它们相对于它定位，并且父级也需要设置宽度和高度，因为内容不会再自动生成设置它。

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>

Answer 2

好的，所以不是代理你的代码，而是采取了一些步骤重写了一些事情，试图保持你的总体结构。如果您使用文本在transform: rotate(-90deg);上执行类似于简单<div>的操作，而不是您编写的旋转CSS。然后只需稍微扩展<td>标签的高度。

<强> 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;
}

最后， JS JIDDLE

Answer 3

您也可以使用writing-mode

https://www.w3.org/TR/css-writing-modes-3/摘要

CSS写作模式Level 3定义了CSS支持各种国际写作模式，如从左到右（例如拉丁语或印度语），从右到左（例如希伯来语或阿拉伯语），双向（例如混合拉丁语和阿拉伯语））和垂直（例如亚洲文字）。

＆＃13;

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);
}

＆＃13;

<table border="2px">
  <tr>
    <td class="rotate">
      <div>ABC</div>
    </td>
    <td>123</td>
    <td class="rotate">
      <div>ABCDEFGHIJ</div>
    </td>
  </tr>
</table>

＆＃13;

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

3 个答案: