Using align-items with wkhtmltopdf - html

Question

I'm using wkhtmltopdf to convert a HTML to PDF. I know wkhtmltopdf uses an old version of webkit, which makes things a little more complicated.
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:
<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;
}
Doesn't work so far. Applying align-items: center; to div.contact doesn't work either.

Answer 1

I think I found your solution. Actually align-self is working but .contact height is not big enough to cover viewport. So I wrote this; I hope it's enough for you.
For HTML
<div class="contact">
<div class="contact-box">
<img src="C:/mypath/picture.jpg">
<span>Contact Name</span>
</div>
</div>
And for 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;
}