SO http://bit.ly/180j6fF - Vertically align images

HTML

<div id="parent">
<img src="http://placehold.it/300x350" class="left">
    <div class="image-wrap">
    <img src="http://placehold.it/250x150" class="right">
        </div>
</div>

CSS

#parent {
    line-height: 500px; /*  <========= set line hieght larger than height of tallest image  */
    background-color:pink;
    max-width:1000px;
    margin:0 auto;
}

#parent img {
    vertical-align: middle;
}

.image-wrap{
    background-color:#ffc;
    display:block;
    float:right;
}

@media (max-width: 570px) {
    #parent {
    line-height: normal;
}

#parent img {
margin:0 autohttp://placehold.it/300x350;
    display:block;
}

.image-wrap{
    background-color:#ffc;
    display:inline;
    float:none;
}

}