How to vertical align this images?

Question

I have this website and I can't seem to vertical align the images on listing. http://www.ruweplus.ro/echipamente-hidromasaj

I tried this but it doesn't vertically align my image:

 .image_wrapper img { display: inline-block; vertical-align: middle; height: 100%; }

Also, I used same code on the parent.

Answer 1

I suggest you wrap your image with a div and give it a class name, here i give "test".

.test::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}
.test img{
    display: inline-block;
    vertical-align: middle;
}

Also your every element after class "image_wrapper", including "test" class, must have height 100%.

Answer 2

Vertical alignment in "old" CSS <= 2 is really hard. I suggest you use CSS3 flexboxes instead. Note that this will only work in new browsers though.

The gist of it is really simple:

.image_wrapper {
    display: flex;
    align-items: center;
}

JSFiddle

By the way, this is a great resource to get you started with flexboxes,

Answer 3

add this Css

.image_wrapper {
  display: flex;
  align-items: center;
}

and Remove this Css

.image_frame .image_wrapper .mask, .edd_download_image:after {
  /* -webkit-box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */
  /* box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */
}

It will work fine I think

Answer 4

if you also need a solution for older browsers you better use the display:table-cell method. you probably need a wrapping element with display:table .

The method is descripted in detail over there: https://css-tricks.com/centering-in-the-unknown/ (Section: "Harder: Unknown child")

or in short over there: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html