CODEWITHSUNDEEP
htmlcss
JCHASE11
JCHASE11

Reputation: 3941

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 square box, with 15px padding. By default, the images appear at the top of the box. I am looking for a way to vertically center the image, given its fixed width, but variable height. Here is my code:

HTML:

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

CSS:

.logoContainer {
    padding: 15px;
    background: #dddddc;
    margin-bottom: 10px;
    width: 186px;
    height: 186px;
}
.logoContainer img {
    max-width: 100%;
    height: auto;
}

I could use absolute positioning, but without knowing the exact height of the image, it would be difficult to perfectly center. BUT, we do know the exact dimensions of the container box. Thoughts?

Upvotes: 1

Views: 194

Answers (2)

Wex
Wex

Reputation: 15705

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; }

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47677

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;
}

Upvotes: 3

Related Questions