How do I vertically center my images on a page

Question

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.

Answer 1

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

Answer 2

Unless I'm misunderstanding, a simple display: flex; and align-items: center; on div#x-content-band-19 (the images' parent) should suffice.

Answer 3

Here is a nice link in CSS tricks. Hope this helps...

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

img {
  vertical-align: middle;
}