html2pdf生成PDF时设置display:inline的div出现对齐错位问题

问题原因 #

1. 你为#M1单独设置了padding-top: 10px，但inline类型元素的上下padding不会撑开行高，只会改变自身可视区域的位置，同线的其他inline元素默认按文本基线对齐，就会出现错位。
2. 你为#M2设置了clear: both属性，该属性仅对浮动元素生效，对inline元素属于无效属性，html2pdf的内置渲染引擎对无效CSS的兼容处理不完善，会额外触发对齐偏移。

修复方案 #

方案1：统一用inline-block+指定对齐规则（兼容性最好，适配所有版本html2pdf）

修改对应CSS和内联属性即可，修改后的代码如下：

$html = '<img src="logoTCSfinal.png" class="tcs" style="width:10%;margin-left:20px;margin-right: 550px;">
<img src="ICSL.png" class="ics" style="width:10%;"><br>
<div style="width: 100%;padding-left:2px;padding-top:2px;font-weight: 600;padding-bottom:2px;border: 3px solid #000000; text-align: left;">DEFINITION DES BESOINS</div>
<!-- 改display为inline-block，指定垂直对齐方式 -->
<style>#M1,#M2,#M3{display: inline-block; vertical-align: middle; margin-right: 40px; font-weight: 600;}</style>
<!-- 删掉M1的padding-top、M2的clear:both，公共样式抽到上面的style里更整洁 -->
<div id="M1" style="padding-left:5px;">SOCIETE: 
</div>
<div id="M2">TEL:</div>
<div id="M3">FAX:</div>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
?>

方案2：用flex布局（写法更简洁，适合新版本html2pdf）

给三个div套一个父容器，用flex控制对齐，完全避免对齐异常：

$html = '<img src="logoTCSfinal.png" class="tcs" style="width:10%;margin-left:20px;margin-right: 550px;">
<img src="ICSL.png" class="ics" style="width:10%;"><br>
<div style="width: 100%;padding-left:2px;padding-top:2px;font-weight: 600;padding-bottom:2px;border: 3px solid #000000; text-align: left;">DEFINITION DES BESOINS</div>
<!-- 父容器用flex，元素之间留间距 -->
<div style="display: flex; gap: 40px; padding: 10px 0 0 5px; font-weight: 600;">
    <div id="M1">SOCIETE:</div>
    <div id="M2">TEL:</div>
    <div id="M3">FAX:</div>
</div>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
?>

内容的提问来源于stack exchange，提问作者Kromoss _