如何用CSS实现两平行列中对应图片与文本的垂直对齐？

下面提供两种适配需求的方案，分别对应「保留原始HTML结构」和「调整结构优化布局」两种场景：

方案一：不改动原始HTML结构 #

利用CSS Grid的display: contents让左右列的子元素直接参与父级网格布局，再通过grid-row绑定对应元素到同一行：

div.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* 可选：设置列之间的间距 */
  align-items: center; /* 每行内容垂直居中对齐 */
}

/* 让左右列容器脱离布局流，子元素直接成为网格项 */
.left-col, .right-col {
  display: contents;
}

/* 绑定对应类名的元素到同一行 */
img.p1, p.p1 { grid-row: 1; }
img.p2, p.p2 { grid-row: 2; }
img.p3, p.p3 { grid-row: 3; }

/* 固定图片和段落的列位置 */
.left-col img { grid-column: 1; }
.right-col p { grid-column: 2; }

原理说明 #

display: contents会让.left-col和.right-col容器从布局中"消失"，内部的图片和段落直接成为.container网格的子元素；通过grid-row将同类名的元素绑定到同一行，再用align-items: center保证每行内容垂直居中。

方案二：调整HTML结构（更直观、兼容性更好） #

将每组图片和段落放到同一容器中，用Grid或Flex轻松实现对齐，结构更符合语义化：

修改后的HTML #

<div class="container">
  <div class="item">
    <img src="1.png" class="p1"/>
    <p class="p1">Lorem ipsum...</p>
  </div>
  <div class="item">
    <img src="2.png" class="p2"/>
    <p class="p2">Lorem ipsum...</p>
  </div>
  <div class="item">
    <img src="3.png" class="p3"/>
    <p class="p3">Lorem ipsum...</p>
  </div>
</div>

Grid版本CSS #

.container {
  display: grid;
  gap: 1.5rem;
}

.item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* 垂直居中 */
  gap: 1rem;
}

Flex版本CSS #

.container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.item {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 1rem;
}

.item img, .item p {
  flex: 1; /* 让图片和段落各占一半宽度 */
}

备选：兼容旧浏览器的表格布局 #

如果需要兼容IE等老旧浏览器，可以用CSS表格布局：

.container {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1.5rem 1rem; /* 列间距和行间距 */
}

.left-col, .right-col {
  display: table-cell;
  vertical-align: middle;
}

.left-col img, .right-col p {
  display: table-row;
}

内容的提问来源于stack exchange，提问作者SRobertJames