如何在标签栏中垂直对齐不同高度的div元素？

你的问题核心是既要让每个标签内的文本（包括单行/多行内容）垂直居中，又要保证hover或激活状态的底部红色边框能对齐到标签栏底部。之前用align-self: center会压缩标签高度，导致边框错位，可通过调整flex布局层级解决：

修改后的CSS代码 #

#hometabswrap {
  width: 100%;
  background: #ffffff;
  border-top: 1px #e1e1e1 solid;
  border-bottom: 1px #e1e1e1 solid;
  margin: 20px 0;
  padding: 0;
}

#hometabs {
  width: 97%;
  margin: 0 auto;
  display: flex;
  padding: 8px 25px; /* 统一上下内边距，移除原padding-bottom:0 */
  align-items: stretch; /* 强制子元素拉伸至容器高度 */
}

#hometabs .home_tab {
  flex: 1; /* 可选：让标签均分宽度，按需调整 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内部内容垂直居中 */
  padding: 10px 14px;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  height: 100%; /* 确保标签占满父容器高度 */
}

#hometabs .home_tab_active,
#hometabs .home_tab:hover {
  border-bottom: 2px solid #B22222;
}

#hometabs .home_tab a {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 替代<br>，优化图标与文字间距，可选 */
}

关键修改说明 #

• 给#hometabs设置align-items: stretch，让所有.home_tab自动拉伸到容器完整高度，统一底部边框的基准线。
• 将.home_tab设为flex容器，通过flex-direction: column + justify-content: center实现内部文本垂直居中，同时保持标签高度与父容器一致。
• 可选优化：把HTML中的<br>替换为flex布局的gap属性，让图标和文字的间距更可控，避免换行带来的布局偏差。
• 调整#hometabs的padding属性，移除原有的padding-bottom:0，统一容器上下内边距，保证标签内容的垂直空间充足。

修改后，无论标签内容是单行还是两行都会垂直居中，hover或激活状态的红色边框也能精准对齐到标签栏底部，不会出现空白错位问题。

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