时间戳

首页 > 解决方案 > 使用 wkhtmltopdf 对齐项目

html - 使用 wkhtmltopdf 对齐项目

问题描述

我正在使用 wkhtmltopdf 将 HTML 转换为 PDF。我知道 wkhtmltopdf 使用旧版本的 webkit，这使事情变得更加复杂。

我有一个联系人图片，我想在它旁边显示联系人姓名：

图片：它应该看起来如何

这是我的 HTML：

<div class="contact">
    <img src="C:/mypath/picture.jpg">
    <span>Contact Name</span>
</div>

CSS：

div.contact {
    display: -webkit-flex;
    flex-direction: row;
    justify-content: left;
}

div.contact>img {
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
}

div.contact>span {
    display: inline-block;
    width: 110px;
}

到目前为止不起作用。申请也不align-items: center;行。div.contact

标签： htmlcssflexboxwebkitwkhtmltopdf

解决方案

我想我找到了你的解决方案。实际上align-self正在工作，但.contact高度不足以覆盖视口。所以我写了这个；我希望这对你来说已经足够了。

对于 HTML

<div class="contact">
    <div class="contact-box">
        <img src="C:/mypath/picture.jpg">
        <span>Contact Name</span>
    </div>
</div>

对于 CSS

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.contact {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: auto;
}

.contact-box {
  background-color: white;
  padding: 10px;
}

.contact img {
    align-self: center;
    justify-self: center;
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
}

.contact span {
    align-self: center;
    justify-self: center;
    width: 110px;
}

推荐阅读