在网格模板表格单元格中垂直居中图像[重复]

Question

我正在尝试制作一张包含标题、图像、内容和 cta 的卡片。在移动视图上，我将卡片分为两列：左侧是标题、内容和 cta，右侧是图片。

grid-template-columns: 2fr 1fr;
grid-template-areas: 
    "header image"
    "content image"
    "cta image";

在常规视图中，卡片是订单标题、图像、内容和 cta 中的一列。

我在移动视图上垂直对齐图像时遇到问题。它只是保持在顶部。在 css-tricks 上，将 align-self: center; 应用于 .c-productCard__image 似乎是使其垂直对齐的正确选择，但它没有移动。我不太熟悉使用网格模板，所以任何建议都会有所帮助。

codepen

Answer 1

您可以在图像容器.c-productCard__image上使用display: flex

&__image {
  display: flex;
  align-items: center;
  height: 100%;
}