如何用css align-items控制grid单元垂直对齐-css教程-PHP中文网

如何用css align-items控制grid单元垂直对齐

P粉602998670

发布： 2025-10-01 22:00:02

原创

979人浏览过

align-items用于设置网格容器内所有项目在交叉轴上的对齐方式，取值如stretch、start、center、end可控制垂直对齐表现，通过align-self可单独覆盖某个项目的对齐方式，常用于卡片、表单、导航等布局中实现内容垂直居中或顶部/底部对齐。

如何用css align-items控制grid单元垂直对齐

在 CSS Grid 布局中，align-items 是控制网格容器内所有单元格（网格项）内容在交叉轴（通常是垂直方向）上对齐方式的关键属性。它作用于整个网格容器，影响每一个网格项的垂直对齐表现。

理解 align-items 的作用范围

align-items 设置在网格容器上，决定每个网格项在其网格区域内的垂直对齐方式。它不会改变网格轨道（track）的大小，但会影响项目在其中的定位。

常见取值包括：

stretch：默认值，项目拉伸以填满整个网格区域（排除 margin 区域）
start：项目与网格区域顶部对齐
end：项目与网格区域底部对齐
center：项目在网格区域内垂直居中

基本使用方法

将 align-items 应用于定义为 display: grid 的父容器即可：

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

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* 所有子项垂直居中 */
}

.item {
  height: 100px; /* 可选：设定具体高度测试效果 */
}

此时，所有 .item 元素会在各自的网格单元格中垂直居中。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

单独控制某个单元格

如果只想让某一个网格项有不同的对齐方式，可以使用 align-self 覆盖 align-items 的设置：

.container {
  display: grid;
  align-items: start;
}

.special-item {
  align-self: end; /* 单独这个项目底部对齐 */
}

这样，大部分项目顶部对齐，而 .special-item 会底部对齐。

实际应用场景

当你设计卡片布局、表单字段对齐或导航菜单时，align-items 非常实用。例如，一个两列布局，左侧文字、右侧按钮，希望按钮垂直居中：

.grid-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* 让文本和按钮都垂直居中 */
}

无需额外设置外边距或定位，即可实现整齐对齐。

基本上就这些。掌握 align-items 和 align-self 的配合使用，能让你更灵活地控制 Grid 布局中的垂直对齐效果，不复杂但容易忽略细节。记得测试不同内容高度下的表现，确保视觉一致性。

以上就是如何用css align-items控制grid单元垂直对齐的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题