How do I vertically center my image?

Question

I have a page here - http://click2recycle.ca/. If you look at the section under the headline "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS", there is picture of a truck. It is vertically centered at the midpoint of the images on its left and right.

I also have a page here - http://vmmed.com/service/?page_id=7. If you look at the section under the headline "OUR ACCREDITATIONS AND AFFILIATIONS", you will see a logo for an organization called CAR (the middle logo). It is not vertically centered at the midpoint of the images on its left and right despite my best efforts.

I have compared the CSS using Chrome's Inspect Element function but I can't seem to find the difference.

Any thoughts?

Answer 1

A lot of people are commenting about fixes, but I think the original question asks WHY the two are different. I found the same and was interested as well (using Chrome) why the two were behaving differently.

First, here are the differences (using Chrome) - I've added a red border to visually show that they're not top-aligned.

http://vmmed.com/service/?page_id=7

and http://click2recycle.ca/

Now, when you view the two pages in Firefox, you see:

and

Again, both of these were from Firefox and show that they ARE both top-aligned. So what's the difference?

That's when I noticed an inline style on one page (http://click2recycle.ca/) and not on the other:

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

(Info about box-align here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-align)

And that's why the two are different! (And why it's specific to Chrome - because of the vendor prefix).

Hope this helps!

Answer 2

There are a couple ways to do it. The simplest is probably add padding-top to its containing div and take it away with a media query(noticed it was responsive) at a certain screen resolution.

alternatively, have a look at this example which I have used successfully a few times, but it's kind of tricky to get everything just right in all browsers with empty elements and using display:inline

Answer 3

add the css

top:30px;

to the element with Xpath:

//*[@id="x-content-band-10"]/div[2]

(div with classes "x-column vc one-third")

Answer 4

This fixes it and should leave it responsive. Drop this in the CSS

.center-block {
margin-top: 2.25em;