Two images one left one right and center vertically - html

Question

I have this code, which aligns two images to left and right side of the page with space between:
.center {
width: 100%;
display: table;
}
.leftk {
display: table-cell;
}
.rightk {
display: table-cell;
text-align: right;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="http://loremflickr.com/300/200" />
</div>
<div class="rightk">
<img src="http://loremflickr.com/400/100" />
</div>
</div>
<span>Text</span>
I tried to do the same with inline-block, but I am unable to align vertically right image to center. Can you please show me a quick example to how to get same result with inline-block?
Edit: If page size is smaller than image width, I want to display them under each other.

Answer 1

Here is how you do it with inline block:
jsFiddle
.center {
font-size: 0; /*remove white space*/
text-align: justify;
}
.center:after {
content: "";
display: inline-block;
width: 100%;
}
.leftk,
.rightk {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="//dummyimage.com/200x200" />
</div>
<div class="rightk">
<img src="//dummyimage.com/100x100" />
</div>
</div>

Answer 2

you can use css3 flexbox instead,
use display:flex instead of display:table
add justify-content:space-between;
it's works fine.
.center {
width: 100%;
display: flex;
justify-content:space-between;
align-items:center;
}
.leftk>img {
width:100px;
height:100px;
}
.rightk>img {
width:50px;
height:50px;
}
<div class="center">
<div class="leftk" style="display: table-cell;">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
<div class="rightk">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
</div>
<span>Text</span>