我正在使用 wkhtmltopdf 将 HTML 转换为 PDF。我知道 wkhtmltopdf 使用旧版本的 webkit,这让事情变得有点复杂。
我有一张联系人图片,我想在图片旁边显示联系人姓名:
Image: How it's supposed to look
这是我的 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 高度不足以覆盖视口(viewport)。所以我写了这个;我希望这对你来说足够了。
对于 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;
}
关于html - 在 wkhtmltopdf 中使用对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65877066/