CSS Grid如何控制图片和文字对齐_align-items center与justify-items center

掌握align-items和justify-items可精准控制CSS Grid中图文对齐：align-items: center实现垂直居中，justify-items: center控制水平居中；实际布局中常设align-items: center使文字与图片垂直居中，justify-items: start保持文字左对齐；可通过align-self或justify-self单独调整某项目对齐方式，关键在于理解主轴与交叉轴的方向及其受grid-template-columns和grid-auto-flow的影响。

在使用 CSS Grid 布局时，控制图片和文字的对齐方式非常关键，尤其是在构建卡片、导航栏或图文混排布局时。align-items 和 justify-items 是两个核心属性，用于控制网格项（grid items）在其单元格内的对齐行为。

align-items: center — 控制垂直方向对齐

这个属性作用于交叉轴（cross axis），在默认的行排列模式下（grid-auto-flow: row），交叉轴是垂直方向。设置 align-items: center 可以让网格项在单元格内垂直居中。

• 一个包含图片和标题的卡片，希望文字在高度方向上与图片居中对齐。
• 多个不等高的网格项需要统一垂直居中显示。

代码示例：

.container {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center; /* 所有子元素垂直居中 */
}
.image {
  grid-column: 1;
}
.text {
  grid-column: 2;
}

此时，图片和文字会在整个行高范围内垂直居中对齐。

立即学习“前端免费学习笔记（深入）”；

justify-items: center — 控制水平方向对齐

这个属性作用于主轴（main axis）的反方向——即在默认列布局下控制网格项在其列内的水平对齐方式。设置 justify-items: center 会让所有网格项在其网格区域中水平居中。

Writer

企业级AI内容创作工具

176

查看详情

• 希望多个文本块或图片在各自的列中居中显示。
• 创建对称或中心对称的布局结构。

注意： 如果容器是按行划分的网格（常见情况），justify-items 影响的是每个项目在其列宽度中的水平对齐。

图文对齐实战技巧

在实际开发中，通常希望图片靠左，文字左对齐但垂直居中。这时可以这样设置：

.grid-layout {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;    /* 垂直居中 */
  justify-items: start;   /* 水平左对齐，避免文字居中 */
  gap: 12px;
}

如果只想让某个特定项目单独对齐，可以用 align-self 或 justify-self 覆盖全局设置：

.text {
  align-self: start; /* 文字顶部对齐 */
}

基本上就这些。掌握 align-items 和 justify-items 的区别，就能灵活控制网格中图片与文字的位置关系。关键是理解主轴与交叉轴的方向，以及它们如何受 grid-template-columns 和 grid-auto-flow 的影响。

以上就是CSS Grid如何控制图片和文字对齐_align-items center与justify-items center的详细内容，更多请关注php中文网其它相关文章！