Question

尝试使用wkhtmltopdf将HTML转换为PDF。

我希望生成的PDF中的表位于中心，但此处用HTML表示的表始终在创建的PDF中左对齐？

可能出现什么问题？

PS：我完全是前端的新手。我想我在造型方面犯了一些小错误。

<div class="divGeneral" id="sumDiv">
            <table id="infoTable">
                <tr>
                    <th>Pr Name:&nbsp</th>
                    <td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
                </tr>
                <tr>
                    <th>Su Date:&nbsp</th>
                    <td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
                </tr> 
            </table>
        </div>

样式表有

.divGeneral {
    width: 100%;
    //float: left;
    text-align: center;
    margin: 0 auto;
    object-fit: cover;
}

#sumDiv {
    // margin-bottom: 50px;
   // display: inline-block;
    // float: none;
    text-align: left;
    margin: 0 auto;
}


#infoTable th {
    border: 0px;
    vertical-align: top;
    padding: 4px 2px 0px 2px;
    width: 180px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

#infoTable td {
    border: 1px solid black;
    padding: 3px 3px 2px 3px;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
textarea
{
    margin: 0px;
}
textarea .multiline{
    margin-top: 2px;
}

Answer 1

如果我正确理解您的问题，您可以添加

#infoTable{
    margin: 0 auto;
}

这只是居中对齐.divGeneral 中的表width:100%。

我还删除了一些对当前任务没有影响的css代码。

请运行以下代码，看看这是否是您想要的。

.divGeneral {
    width: 100%;
    object-fit: cover;
}

#sumDiv {
    text-align: left;
    margin: 0 auto;
}

#infoTable{
	margin: 0 auto;
}

#infoTable th {
    vertical-align: top;
    padding: 4px 2px 0px 2px;
    text-align: right;
}

#infoTable td {
    border: 1px solid black;
    padding: 3px 3px 2px 3px;
    text-align: left;
    vertical-align: top;
}

textarea .multiline{
    margin-top: 2px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divGeneral" id="sumDiv">
  <table id="infoTable">
     <tr>
       <th>Pr Name:&nbsp</th>
       <td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
     </tr>
     <tr>
       <th>Su Date:&nbsp</th>
       <td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
     </tr> 
  </table>
</div>

</body>
</html>

Answer 2

使用flexbox方法。我希望这对您有用。

.divGeneral {
    display:flex;
    justify-content:center;
    align-items:center;
}

中心对齐表 - wkhtmlpdf

2 个答案: