Centre images vertically
HTML
<div class="container">
<div class="row">
<div class="cell-left">
<img src="http://placehold.it/300x350" class="left">
</div>
<div class="cell-right">
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
CSS
.container{
display: table ;
width:100%;
max-width:1000px;
}
.row{
display: table-row;
}
.cell-left, .cell-right{
display: table-cell;
vertical-align: middle;
}
.cell-right{
text-align:right;
}
@media (max-width: 570px) {
.container, .row{
display:inline;
}
.cell-left, .cell-right{
display:inline;
}
.cell-left img{
display:block;
margin:0 auto;
}
.cell-right img{
display:block;
margin:0 auto;
clear:left;
}
}