【问题标题】:Align item vertically with flex [duplicate]用flex垂直对齐项目[重复]
【发布时间】:2018-05-27 02:15:28
【问题描述】:

我有一家 woocommerce 商店,我所有的产品图片都带有 flexbox 并在中间对齐项目。我安装了一个插件,它在悬停时改变图片,在这个类中,对齐不起作用,它拉伸了我的图片。但主图没有拉伸

我做了 显示:弹性 高度:320 像素 对齐项目:中心 对齐内容:中心

您可以在这里看到所有内容:http://fistukids.de/shop/

只需将鼠标悬停在图片上,即可看到它在顶部对齐

【问题讨论】:

    标签: css flexbox vertical-alignment


    【解决方案1】:

    我想你想要它垂直。

    使用 flexbox 你可以做到:

    flex-direction: row/column
    

    在您的情况下,它将是列。 希望我理解正确。

    【讨论】:

    • 是的,我希望它像主图片一样垂直对齐。但 flex-direction 在第二个图像类上也对我不起作用。你在检查器中测试它吗?
    • 对不起,我的网速很慢,所以我帮不了你太多。当我回到家时,我会仔细看看。我刚刚回答了这个问题,因为这是垂直对齐的方式。
    • 酷。多谢兄弟。我有 320px 高度的视口,第一张图片已经可以使用 justify-content。只有悬停的第二张图片有这个问题。如果你稍后检查它会很好