Search code examples
htmlcssalignmentvertical-alignment

How do I vertically center my images on a page

If you scroll down to the sub-section entitled "Our qualifications to recycle electronics" on this page, you will see 3 graphics that represent the different qualifications. I would like to ensure that they are both horizontally centered within their column and vertically centered with each. I have the first part down but I am struggling with the second. Any help would be appreciated.

Solution

  • Are you wanting a JS or CSS solution?

    CSS: on #x-content-band-19

    display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

    Javascript: Just take the container height of those 3 divs, get the height of each child, subtract the diff and divide by 2. So like.

    var ph = $('#x-content-band-19').height();
var ih = $('img').height();

$('img').css({top : (ph - ih) / 2 });