Flex容器内文本对齐问题：如何统一H4与图标对齐？

调整.grid-item的CSS配置 #

你当前的.grid-item同时设置了inline-block和flex-basis，这会干扰flex布局的正常工作，可按以下方式修改：

.grid-item {
  flex-basis: 25%;
  /* 移除inline-block，flex子项无需该属性 */
  /* display: inline-block; */
  padding: 0;
  width: 100%;
  /* 改用flex布局内部元素，实现垂直排列且顶部对齐 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 确保所有子项在flex容器中顶部对齐 */
  align-self: flex-start;
}

额外优化建议 #

• 若图标大小不一致，给图标容器设置固定宽高，保证所有图标占据相同空间：

.grid-item .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

• 给h4设置统一的边距，避免文本长度差异导致偏移：

.grid-item h4 {
  margin: 10px 0 0;
  padding: 0;
}

原理：将每个.grid-item设为垂直方向的flex容器，让图标和h4按列排列，通过justify-content: flex-start确保内部元素从容器顶部开始布局，结合flex父容器的顶部对齐规则，就能实现所有图标、h4分别处于同一水平线。

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