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

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. 使用grid-template-columns: repeat(3, min-content)具有min-content宽度的三列布局grid-template-columns: repeat(3, min-content)在外部容器上grid-template-columns: repeat(3, min-content) 。
3. 使用grid-template-rows: 1fr min-content将第二行调整到中间元素的高度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>