使用 Flexbox 实现按钮与下方文本的精准对齐及响应式布局

✅ 重构后的 HTML 结构（关键改动）

<div class="btn-container">
  <div>
    <a style="background-color: #A4907C;" href="process_role.php?role=user" class="btn">
      <i class="fa-solid fa-user"></i>
      <span style="font-family: Lora;">User</span>
    </a>
    <h5>Sign Up as a User on MedConnect</h5>
  </div>

  <div>
    <a style="background-color: #5A96E3;" href="process_role.php?role=consultant" class="btn">
      <i class="fa-solid fa-hand-holding-medical"></i>
      <span>Consultant</span>
    </a>
    <h5>Sign Up as a Consultant on MedConnect</h5>
  </div>
</div>

⚠️ 注意：原

已移除，其内容已内联至各自按钮容器中，消除 DOM 层级断裂。

✅ 关键 CSS 布局逻辑

.btn-container {
  display: flex;
  justify-content: center; /* 水平居中整个按钮组 */
  gap: 80px; /* 推荐替代 margin: 0 100px —— 更可控、更语义化 */
  margin-top: 200px;
  flex-wrap: wrap; /* 支持小屏换行 */
}

.btn-container > div {
  display: flex;
  flex-direction: column;
  align-items: center; /* 确保按钮与文本在子容器内水平居中 */
  min-width: 220px; /* 防止小屏下文本过窄换行失衡 */
}

.btn {
  padding: 12px 24px;
  font-size: clamp(1.25rem, 4vw, 3.125rem); /* 响应式字体：最小1.25rem，最大3.125rem（50px），中间按视口宽度平滑缩放 */
  border-radius: 6px;
  color: white;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn span {
  font-size: clamp(0.875rem, 3vw, 1.25rem); /* 文本标签同样响应式 */
  padding-top: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Lora', serif;
}

.btn-container h5 {
  margin-top: 12px;
  font-size: clamp(0.875rem, 2.8vw, 1.125rem); /* 描述文字同步缩放 */
  font-weight: 500;
  color: #333;
  max-width: 240px;
  line-height: 1.4;
}

✅ 响应式增强要点

• 使用 clamp(min, fluid, max) 替代固定像素值，使按钮文字、图标文字和描述标题随视口宽度平滑缩放；
• 添加 flex-wrap: wrap 和 min-width，确保小屏（如手机）下两个按钮列自动转为单列堆叠，同时避免文本被过度压缩；
• gap 属性替代 margin 控制间距，避免外边距合并问题，提升布局稳定性；
• 所有颜色、圆角、过渡效果均保留品牌一致性，且 color: white 适配深色按钮背景（原示例中 #A4907C 和 #5A96E3 均需高对比度文字）。

✅ 最终效果验证

• ✅ 桌面端：两按钮并排，各自下方文本严格垂直居中对齐；
• ✅ 平板端（~768px）：按钮宽度自适应，文本不折行，间距协调；
• ✅ 手机端（
• ✅ 无障碍：每个

  与对应 位于同一 DOM 子树，语义关联明确，利于屏幕阅读器识别。

? 进阶提示：若需支持更多角色（如 Admin），只需复制

块即可，Flexbox 会自动均分空间；如需动画引导，可在 .btn-container > div 上添加 opacity + transform 进入动画，进一步提升用户体验。