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

Question

我正在尝试制作一张包含 header、图像、内容和号召性用语的卡片。在移动视图中，我将卡片分成两列：左边是 header、内容和号召性用语，右边是图片。

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

在常规视图中，卡片是顺序为 header、图像、内容和号召性用语的一列。

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

Answer 1

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

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

Vertically centering an image in a grid template table cell