本文讲解如何通过合理设置 Flexbox 的 align-items: center 属性，使容器内高度各异的图片在垂直方向上以中心轴对齐，实现视觉上的整齐排布。
本文讲解如何通过合理设置 flexbox 的 `align-items: center` 属性，使容器内高度各异的图片在垂直方向上以中心轴对齐，实现视觉上的整齐排布。
在使用 Flexbox 布局图片时，一个常见误区是将 align-items: center 应用于父级容器（如 .console-container），而实际起作用的应是直接包裹图片项的 flex 容器——即 .console-row。这是因为 align-items 控制的是其直接子元素在交叉轴（cross axis）上的对齐方式；若该属性未作用于图片所在层级的 flex 容器，则无法影响图片的垂直位置。
在你的代码中，.console-row 是包含所有 <label></label> 元素的 flex 容器，而每个 <label></label> 内部的 .console-image img 才是真正需要垂直居中的内容。因此，只需将 align-items: center 明确添加到 .console-row 规则中：
.console-row {
display: flex;
gap: 30px;
align-items: center; /* ✅ 关键：确保所有图片按中心线对齐 */
}
同时，为保证图片在各自 .console-image 容器中也居中显示，建议补充以下样式（增强健壮性）：
.console-image {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 确保容器撑满可用高度 */
}
.console-image img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
cursor: pointer;
opacity: 0.5;
transition: all 250ms ease-in-out;
}
.console-image img:hover {
opacity: 0.8;
}
.console-row input[type="radio"]:checked + .console-image img {
opacity: 1;
transform: scale(1.1);
filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.75));
}
⚠️ 注意事项：
- 避免在
.console-row label上设置flex: 1（当前 CSS 中存在），这会强制每个 label 占据相等宽度，反而压缩图片显示区域、干扰垂直对齐效果。建议移除或改用flex: none。 - 确保
.console-image具有明确高度（例如继承自父容器），否则align-items: center在无高度约束下可能表现异常。 - 不要依赖
vertical-align: middle（仅对 inline/inline-block 元素有效），在 flex 布局中它会被忽略。
✅ 总结：Flexbox 垂直居中图片的核心在于——让图片的直接父 flex 容器启用 align-items: center，并确保该容器具有可计算的交叉轴尺寸（如高度）。无需额外 JavaScript 或复杂 hack，纯 CSS 即可优雅解决。
