时间戳

首页 > 解决方案 > 如何使用 mpdf 垂直居中文本

mpdf - 如何使用 mpdf 垂直居中文本

问题描述

如何在mpdf中的单个页面上垂直和水平居中文本

（我知道答案，stackoverflow 只是让我写了一个更长的问题，允许我在这里发布我的答案......）

标签： mpdf

解决方案

虽然 mpdf 支持一些 css，但有一些可以让您通过 CSS 居中的东西不起作用：

  • display: flex不管用
  • <table>不height: 100%工作
  • <div style="position: absolute; top: 50%; left: 50%;"></div>不管用

但是，我确实找到了一个技巧：$mpdf->hPt并$mpdf->wPt以磅为单位返回页面尺寸。
这意味着您可以使用表格单元格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 计算可确保您对边缘情况具有相同的舍入和处理。

推荐阅读