[英]Using align-items with wkhtmltopdf
I'm using wkhtmltopdf to convert a HTML to PDF.我正在使用 wkhtmltopdf 将 HTML 转换为 PDF。 I know wkhtmltopdf uses an old version of webkit, which makes things a little more complicated.我知道 wkhtmltopdf 使用旧版本的 webkit,这使事情变得更加复杂。
I have a contact image and I want to display the contact name right next to it:我有一个联系人图片,我想在它旁边显示联系人姓名:
Image: How it's supposed to look图片:它应该看起来如何
This is my HTML:这是我的 HTML:
<div class="contact">
<img src="C:/mypath/picture.jpg">
<span>Contact Name</span>
</div>
CSS: 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;
}
Doesn't work so far.到目前为止不起作用。 Applying align-items: center;
应用align-items: center;
to div.contact
doesn't work either.到div.contact
也不起作用。
I think I found your solution.我想我找到了你的解决方案。 Actually align-self is working but .contact height is not big enough to cover viewport.实际上align-self正在工作,但.contact高度不足以覆盖视口。 So I wrote this;所以我写了这个; I hope it's enough for you.我希望这对你来说已经足够了。
For HTML对于 HTML
<div class="contact">
<div class="contact-box">
<img src="C:/mypath/picture.jpg">
<span>Contact Name</span>
</div>
</div>
And for CSS对于 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.