将产品图像与底部垂直对齐

Question

我正在尝试将产品图片与底部对齐，以保持价格一致。所以基本上这就是它现在的样子：

这就是我喜欢它的样子：

我已尝试使用vertical-align: bottom;，但这不起作用。

我正在使用Woocommerce，但我无法在任何地方找到它。

这是网站的链接：here

亲切的问候！

Answer 1

尝试表格布局。

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

Answer 2

有几种方法可以解决这个问题。这是我建议的解决方案。

您遇到的主要问题是图片大小不同。如果图像大小相同，则不会出现问题。所以，这是你需要解决的问题。

看一下CSS中的Inspect Element，我发现了一些事情。首先，有一个样式定义如下：

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

此处不需要height属性。 此外，它 !important 的事实对我们的原因没有帮助。你可以摆脱这个属性，即修改类：

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

您需要定位的下一件事是让所有图片都具有相同的尺寸。我在这里看到专门针对图像的课程：

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

您可以执行的操作是添加固定的height以及max-height属性和max-width属性。 max-width和max-height属性可防止图像缩放不成比例，而height属性会强制所有图像都相同height（请谨慎选择此值）。只是为了举例说明，您可以按如下方式修改类：

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

我在Inspect Element中进行了这些更改以获得此图片：

编辑：由于两个原因，图像不居中。首先，应用 float 属性，如下所示：

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

删除此代码。其次，正如您在上面的代码中所看到的， margin 属性如下：

margin:0 0 8px;

只需将其更改为：

margin:0 auto 8px;

这将使图像居中。请参阅下面的更新图片：

Answer 3

将图片包装在容器中＆lt; div＆gt;和css那个div：

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

和css那张图片：

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

就像这个图像一直在div的底部。