centering a image using an auxiliar span

centering images vertically inside a div using an aditional element before the div

by heriberto perez

HTML

<div id="container">
    <span class="auxiliar"></span>
    <img class='centered' src="http://placekitten.com/1300/800"/>
    <div class="">MEASUREMENTS: 20-20-20</div>
</div>

<div id="container">
    <span class="auxiliar"></span>
    <img class='centered' src="http://placekitten.com/1300/800"/>
    <div class="">MEASUREMENTS: 20-20-20</div>
</div>

CSS

#container
{
    float: left;
    width:50%;
    height:400px;
    text-align: center;
    background: yellow;
    padding: 20px 0;
}

.auxiliar
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.centered
{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}