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

Question

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

这就是我想要的样子：

我试过 vertical-align: bottom; 但没用。

我正在使用 Woocommerce，但我找不到任何地方。

这是 link 的网站：here

亲切的问候！

Answer 1

尝试 table 布局。

.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

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

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

看看 Inspect Element 中的 CSS，我观察到了一些事情。首先，有一个这样定义的样式：

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

这里的height 属性不需要。 此外，它具有 !important 这一事实对我们的事业没有帮助。你可以去掉这个属性即修改 class :

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

接下来您需要定位的是让所有图像的大小相同。我看到 class 专门针对此处的图像：

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（select这个值慎重）。举个例子说明一下，你可以修改class如下：

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

只需将图像包装在容器中

和 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的底部。

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

Vertically align product images with bottom

html

css

wordpress

vertical-alignment

woocommerce