Vertically align product images with bottom

问题

I am trying to align the product images with the bottom in order to keep the prices aligned. So basically this is what it looks like right now :

This is how I'd like it to look like :

I've tried with vertical-align: bottom; but that didn't work.

I am using Woocommerce and I was not able to find out anywhere.

This is the link of the website : here

Kind regards!

回答1:

Try table layout.

.featured-product-tabs .tab-content ul.products {
  padding: 0;
  display: table;
}

ul.products li.product.product-home {
  text-align: left;
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

回答2:

just wrap image in a container <div> and css that div:

position:relative;
height:100px; you can change the height value here;

and css that image:

position: relative|absolute|fixed; choose one from this three;
bottom: 0;

like this image will alway at the bottom of the div.

回答3:

There are several ways to go about this. Here's a solution I would suggest.

The main problem you have is that the images are of different sizes. Had the images been of the same size, there wouldn't be an issue. So, this is the problem that you need to tackle.

Taking a look at the CSS in the Inspect Element, there are a couple of things I observe. First, there is a styling defined as such :

img, video, object {
    max-width: 100%;
    height: auto !important;
}

The height property here isn't needed. Also, the fact that it has !important doesn't help our cause. You can get rid of this property i.e. modify the class as such :

img, video, object {
    max-width: 100%;
}

Next thing you need to target is to get all the images to be of the same size. I see a class specifically targeting the images here :

ul.products li.product a img {
    width: 100%;
    display: block;
    margin: 0px 0px 8px;
}

What you can do is add a fixed height along with a max-height property and a max-width property. The max-width and max-height property will prevent the images from scaling out of proportion while the height property will force all the images to be of the same height (select this value carefully). Just to give an example for the purpose of illustration, you can modify the class as follows :

ul.products li.product a img {
    width:100%;
    max-width: 10em;         /*added property*/
    height:15em;             /*added property*/
    max-height: 20em;        /*added property*/
    display:block;
    margin:0 0 8px;
}

I made these changes in the Inspect Element to arrive at this image :

EDIT : The images are not centered because of two reasons. First, there is a float property applied to it as follows :

.wp-post-image {
    float: left;
}

Remove this code.Secondly, as you can see in the code above, the margin property is as follows :

margin:0 0 8px;

Just change it to :

margin:0 auto 8px;

This will center the images. See the updated image below :

来源：https://stackoverflow.com/questions/33491552/vertically-align-product-images-with-bottom