Ionut Ionut - 6 months ago 12
CSS Question

How to vertical align this images?

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

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%.