Question

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

我尝试使用多种书写模式组合并在CSS中旋转，但无法解决问题。这是测试表：https://universaltheosophy.com/hpb/test-table.htm

代码如下：

AcquireTokenByIntegratedWindowsAuthAsync()

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

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

旋转的文本在表td元素的上下边界内未正确对齐。文本要么超出了td边界，要么被压缩在一起（当您在此处运行代码段时，请参见普通视图和整页视图之间的区别）
文本在水平方向上与中心图像高度偏离（我希望中心图像两侧的旋转文本紧紧对齐）。

修改

要在此处解决第一个评论（例如：rowspans），这是没有rowpans的同一张表，结果相同：

<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>

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

Answer 1

我对使用CSS grid layout的问题有不同的解决方案：

请注意不使用表的标记更改。使用display: grid创建网格布局-请注意，标记中的&nbsp用于空网格项目。
在外部容器上使用min-content来制作宽度为grid-template-columns: repeat(3, min-content)的三列布局。
使用grid-template-rows: 1fr min-content

对于垂直对齐，我使用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>

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

1 个答案: