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

Question

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

4

我正在尝试在HTML表格中旋转一些文本，但无论我做什么，都会出现一些对齐和文本流的问题。

我尝试使用CSS中各种组合的writing-mode和rotate，但无法解决这个问题。这是测试表格：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>

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

旋转的文本没有在表格td元素的顶部和底部边界内正确对齐。要么文本超出了td边界，要么被挤在一起（当您在此处运行代码片段时，请查看正常视图和全页视图之间的差异）
文本在中心图像的水平对齐位置远离（我希望旋转的文本在中心的图像两侧紧贴它）。

编辑

为了回应这里的第一个评论（关于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>

- Jon Fergus

你为什么要使用 row-span？ - kukkuz

为了使左侧和右侧的两个段落成为表格的完整高度，因此rowspan创建了一个单元格来实现这一点。但对于手头的问题来说，没有rowspan的表格也存在相同的问题。编辑：我添加了没有rowspan的相同表格，以便您可以在那里查看代码片段，并得到相同的问题。 - Jon Fergus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

我有一个使用CSS Grid布局来解决你问题的不同方案：

最初的回答

Note the change in markup without using tables. Create a grid layout using display: grid - note that the &nbsp in the markup is for an empty grid item.
Make a three-column layout with min-content width using grid-template-columns: repeat(3, min-content) on the outer container.
Fit the second row to the height of the middle element by using grid-template-rows: 1fr min-content

For the vertical alignment, I am using 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>