我正在使用 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
也不起作用。
我想我找到了你的解决方案。实际上 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;
}
align-items 不适用于 wkhtmltopdf,但 -webkit-box-align: center 可以工作,与 display: -webkit-box
一起使用div.contact {
display: -webkit-box;
-webkit-box-align: center;
}