如何使用mpdf垂直居中文本
How to vertically center text with mpdf
如何在 mpdf 的单个页面上将文本垂直和水平居中
(我知道答案,Whosebug 只是让我写了一个更长的问题,允许 post 在这里加上我的答案...)
虽然 mpdf 支持一些 css,但是一些可以让您通过 CSS 居中的东西不起作用:
display: flex
不工作
<table>
与 height: 100%
不工作
<div style="position: absolute; top: 50%; left: 50%;"></div>
不工作
但是,我确实找到了一个技巧:$mpdf->hPt
和 $mpdf->wPt
return 页面尺寸(以磅为单位)。
这意味着您可以将 table 单元格与 height: {$mpdf->hPt}pt; vertical-align: middle; text-align: center;
:
一起使用
$mpdf = new \Mpdf\Mpdf($options);
$h = $mpdf->hPt;
$w = $mpdf->wPt;
$html = <<<HTML
<html>
<body style="margin: 0; padding: 0;">
<table style="width: {$w}pt; margin: 0; padding: 0;" cellpadding="0" cellspacing="0">
<tr>
<td style="height: {$h}pt; text-align: center; vertical-align: middle; padding: 0px 5px; margin: 0;">
Hello World
</td>
</tr>
</table>
</body>
</html>
HTML;
$mpdf->WriteHTML($html);
显然,使用 dpi 自己计算该值是一种选择,但使用 mpdfs 计算可确保您对边缘情况进行相同的舍入和处理。
如何在 mpdf 的单个页面上将文本垂直和水平居中
(我知道答案,Whosebug 只是让我写了一个更长的问题,允许 post 在这里加上我的答案...)
虽然 mpdf 支持一些 css,但是一些可以让您通过 CSS 居中的东西不起作用:
display: flex
不工作<table>
与height: 100%
不工作<div style="position: absolute; top: 50%; left: 50%;"></div>
不工作
但是,我确实找到了一个技巧:$mpdf->hPt
和 $mpdf->wPt
return 页面尺寸(以磅为单位)。
这意味着您可以将 table 单元格与 height: {$mpdf->hPt}pt; vertical-align: middle; text-align: center;
:
$mpdf = new \Mpdf\Mpdf($options);
$h = $mpdf->hPt;
$w = $mpdf->wPt;
$html = <<<HTML
<html>
<body style="margin: 0; padding: 0;">
<table style="width: {$w}pt; margin: 0; padding: 0;" cellpadding="0" cellspacing="0">
<tr>
<td style="height: {$h}pt; text-align: center; vertical-align: middle; padding: 0px 5px; margin: 0;">
Hello World
</td>
</tr>
</table>
</body>
</html>
HTML;
$mpdf->WriteHTML($html);
显然,使用 dpi 自己计算该值是一种选择,但使用 mpdfs 计算可确保您对边缘情况进行相同的舍入和处理。