Vertically Centering Image In Fixed Container

I am using wordpress to dynamically display images. Each image has a fixed width of 186 px and variable height, depending on the proportions of the image. Each image sits in a squa

Solution 1:

Try this - http://jsfiddle.net/vLbRF/

.logoContainer {
    padding:15px;
    background:#dddddc;
    margin-bottom: 10px;
    width:186px;
    height:186px;
    line-height: 186px;
}

.logoContainer img {
    max-width: 100%;
    vertical-align: middle;
}

Solution 2:

Using this technique which implements vertical-align will allow you to have dynamic-height containers:

<div class="logoContainer">
    <span></span><img src="/path/to/image.jpg" />
</div>

CSS:

.logoContainer {
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; }
span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
.logoContainer img { 
    vertical-align: middle;
    display: inline-block; }