Flexbox布局项等内边距设置与长文本居中对齐问题

核心问题分析 #

你给每个h1项设置了固定的flex-basis: calc(16.66% - 20px)以实现上排6个的布局，但长文本（如Outcome/KPI）会因内容换行、h1默认文本对齐规则或容器空间分配问题，导致视觉上未居中。同时h1的默认样式（如内外边距）也会干扰对齐效果。

具体修复步骤 #

1. 确保长文本换行后仍居中对齐 #

给innerTabs h1添加文本居中属性，同时调整盒模型规则避免内边距撑开容器：

.innerTabs h1 {
  flex: 0 0 calc(16.66% - 20px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* 新增：换行文本也保持居中 */
  padding: 10px; /* 新增：给文本留内边距，避免贴边 */
  box-sizing: border-box; /* 新增：让内边距包含在宽度计算内 */
}

2. 统一项间距，避免默认样式干扰 #

用gap替代margin控制项之间的间距，同时重置h1默认margin：

.innerTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* 新增：简洁控制项间距，避免margin叠加问题 */
}

.innerTabs h1 {
  /* 其他样式不变 */
  margin: 0; /* 重置默认margin，改用gap控制间距 */
}

3. 简化激活状态样式，保持一致性 #

去掉重复的样式代码，确保激活状态与普通项的内边距一致：

h1.activate {
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
  border-radius: 26px;
  font-weight: 600;
  padding: 10px; /* 与普通项保持一致内边距 */
}

h1.activate:hover {
  /* 无需重复所有样式，仅保留需要的属性 */
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
}

完整修正后的CSS代码 #

.innerTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.innerTabs h1 {
  flex: 0 0 calc(16.66% - 10px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
}

.innerTabs h1:hover {
  color: lightgray;
  cursor: pointer;
}

#contractNotes {
  width: 300px;
}

h1.activate {
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
  border-radius: 26px;
  font-weight: 600;
}

h1.activate:hover {
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
}

h1.inactive {
  color: black;
}

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