center images vertically in div

Question

Each image has a div parent, these parents' width and height are in proportion, the question is, i can't center each image inside its parent horizontally. it seems it only takes the first element's height and applies it to the rest of the elements. ![it seems it only takes the first elements height and apply it to all of the rest ][1]

function centerImages(image) {
  var parent_height = $('.thumb img').parent().height();  
  var image_height = $('.thumb img').height();  
  var top_margin = (parent_height - image_height) / 2;  
  $('.thumb img').css( 'margin-top' , top_margin);
}

$(".thumb img").each(function() {
        centerImages(this);
});

demo: http://codepen.io/waveiron/pen/ExpLd

possible duplicate of [How to horizontally center a div in a div?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) — Nathan, Jun 27 '14 at 13:35
I don't think so, this is more related to the use of each() in jQuery, the former on CSS rules — Mauro, Jun 27 '14 at 13:46

score 2 · Accepted Answer · answered Jun 27 '14 at 13:36

2

You are pointing to the same image all over again. Simply change to:

     function centerImages(image) {
    var parent_height = $(image).parent().height();  
    var image_height = $(image).height();  
    var top_margin = (parent_height - image_height) / 2;  
    $(image).css( 'margin-top' , top_margin);
}
$(".thumb img").each(function() {
    centerImages(this);
});

Plus add 'px' as also suggested.

answered Jun 27 '14 at 13:36

Mauro

2,032
3
25
47

@Kevin please mark this answer as correct (the little V on the left side) – Djouuuuh Jun 27 '14 at 14:06
oh! there is a 'V', i never noticed.. sorry for that. – Kevin Jun 27 '14 at 14:39

score 0 · Answer 2 · answered Jun 27 '14 at 13:35

0

You're missing to add px:

$('.thumb img').css( 'margin-top' , top_margin + "px");

(I'd also suggest to cache jQuery objects when possible:

var $image = $(image);
var parent_height = $image.parent().height();
var image_height = $image.height();

)

answered Jun 27 '14 at 13:35

MaxArt

22,200
10
82
81

score 0 · Answer 3 · answered Jun 27 '14 at 13:37

One way is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

Or, if you don't want to have an extra element in modern browsers and don't mind using IE expressions, you can use a pseudo-element and add it to IE using a convenient Expression, that runs only once per element, so there won't be any perfomance issues

If I understod your question right....

center images vertically in div

3 Answers3