居中对齐表格 - wkhtmltopdf答案

【问题标题】：Center Align Table - wkhtmlpdf居中对齐表格 - wkhtmltopdf
【发布时间】：2018-04-03 00:03:16
【问题描述】：

尝试使用 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;
}

【问题讨论】：

标签： html css wkhtmltopdf

【解决方案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>

【讨论】：

没有达到我的目的，因为我认为问题出在 wkhtml 库和表格对齐上。但我认为您的方法总体上是正确的，谢谢！

【解决方案2】：

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

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

【讨论】：