在表格或网格中垂直对齐和定位旋转文本

Question

我正在尝试在html表中旋转一些文本，但无论我做什么，我最终都会遇到一些对齐和文本流问题。

我尝试过使用写入模式的各种组合和css中的旋转，但无法解决问题。这是测试表：https://universaltheosophy.com/hpb/test-table.htm

这是代码：

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<table cellpadding="2" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
    </td>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png"></p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

问题主要出现在两个地方：

1. 旋转的文本未在表td元素的顶部和底部边界内正确对齐。文本扩展到td边界之外或者它被压缩在一起（当你在这里运行代码片段时，看到普通视图和整个页面视图之间的差异）
2. 文本水平对齐远离中心的图像（我希望中心图像两侧的旋转文本紧贴它）。

编辑

为了解决这里的第一个评论（re：the rowspans），这里是没有rowspans的同一个表，结果相同：

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<table cellpadding="5" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png" class="img1"></p>
    </td>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

Answer 1

我使用CSS grid layout解决了你的问题：

1. 请注意标记的更改，而不使用表。使用display: grid创建网格布局 - 请注意，标记中的&nbsp用于空网格项。
2. 使用外部容器上的min-content创建grid-template-columns: repeat(3, min-content)宽度的三列布局。
3. 使用grid-template-rows: 1fr min-content将第二行调整到中间元素的高度
4. 对于垂直对齐，我使用writing-mode：

   .wmode {
      writing-mode: tb-rl;
      transform: rotate(-180deg);
   }

见下面的演示：

.container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: 1fr min-content;
  justify-content: center;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.wmode {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}

<div class="container">
  &nbsp;
  <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
  &nbsp;
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
  <img src="https://via.placeholder.com/400x338?text=image">
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
  &nbsp;
  <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
  &nbsp;
</div>