将图像垂直居中在网格模板表单元格中

Question

我正在尝试制作一个包含标题，图像，内容和cta的卡。在移动设备视图中，我将卡分为两列：左侧显示标题，内容和cta，右侧显示图像。

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

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

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

Answer 1

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

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