CODEWITHSUNDEEP
htmlcss
user2665694
user2665694

Reputation:

Vertical centering of multiple images inside one DIV

I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):

<div>
  <img src="..">
  <img src="..">
  ...
</div>

This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).

How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.

Upvotes: 0

Views: 2941

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

After re-reading your question, that the <div> is at least as high as the highest image, simply do this:

CSS

img {
    vertical-align: middle;
}​

Try it here: http://jsfiddle.net/AsD9q/

You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)

That's the outcome:

enter image description here

First answer, which works with every height of the div:

As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:

HTML

<div>
    <img src="http://lorempixel.com/200/100/">
    <img src="http://lorempixel.com/200/80/">
    <img src="http://lorempixel.com/200/120/">
    <img src="http://lorempixel.com/200/60/">
</div>​

CSS

​div {
    display: table-cell;
    vertical-align: middle;
    /* only added for demonstration */
    height: 200px;
    border: 1px solid red;
}
img {
    vertical-align: middle;
}

This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.

Upvotes: 3

Rick Calder
Rick Calder

Reputation: 18685

This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.

First you need to set the images to the top of the div like this in the CSS:

   div img{vertical-align:top;}

Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.

​$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
    $(this).css('margin-top',margin);
});        
});​

Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/

Upvotes: 0

Related Questions