在 MPDF 中将文本与底部对齐

Posted 2023-05-07

【中文标题】在 MPDF 中将文本与底部对齐

【英文标题】：Align text to the bottom in MPDF

【发布时间】：2021-07-25 10:24:45

【问题描述】：

如何将表格标题中的文本与此 MPDF 文件的底部对齐？

<table class="table table-bordered" style="font-weight: bold;color: black;width:100%;">
<thead>
<tr text-rotate="90">
<th text-rotate="0" style="border: 1px solid black; font-size:16px;width:20%;text-align:center;font-weight: bold;color: black;vertical-align: bottom;">SUBJECTS </th>
<th style="border: 1px solid black;color: black;font-weight: bold; font-size:15px; width:40px; text-align:center;">CA1 10% </th>
<th style="border: 1px solid black;color: black;font-weight: bold;font-size:15px; width:40px; text-align:center;"> CA2 10% </th>
</tr>
</thead>
</table>

我似乎无法将标题中的文本移到底部。我试过 vertical-align= bottom 但没有运气。

【问题讨论】：

如果要将它们对齐到底部，为什么要使用 text-align:center; ？ :) 我的意思是......使用文本左对齐（在你的情况下）

text-align left 将它移到左边，而不是底部

文本在被旋转的地方左对齐。不确定 ' text-rotate ' 是如何工作的（因为它不是 css 属性），但如果它与 transform: rotate() 一样工作，那么 text-align left 应该可以工作。

文本旋转适用于 MPDF

然后使用text-align: left 就像@MihaiT 所说的那样。如果 text-align left 将其向左移动是合乎逻辑的，但由于您将其旋转90 degrees 逆时针，left text-align 将使其底部文本对齐。

【参考方案1】：

只需将以下代码添加到您的th

writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);

【参考方案2】：

您可以尝试类似的方法，希望对您有所帮助。

th span
writing-mode: vertical-rl;
transform: rotate(180deg);

<table class="table table-bordered" style="font-weight: bold;color: black;width:100%;">
<thead>
<tr text-rotate="90">
<th text-rotate="0" style="border: 1px solid black; font-size:16px;width:20%;text-align:center;font-weight: bold;color: black;vertical-align: bottom;"><span>SUBJECTS</span> </th>
<th style="border: 1px solid black;color: black;font-weight: bold; font-size:15px; width:40px; text-align:center;"><span>CA1 10% </span></th>
<th style="border: 1px solid black;color: black;font-weight: bold;font-size:15px; width:40px; text-align:center;"><span> CA2 10% </span></th>
</tr>
</thead>
</table>

【参考方案3】：

我将“vertical-align:bottom”直接放在了，它工作。我不知道为什么它以前不起作用。