实现按钮容器下方文本对齐及响应式适配需求

要实现按钮下方文本与按钮对齐，同时保证屏幕缩小时布局规整，核心是让按钮和对应文本属于同一个布局单元，再通过Flexbox实现响应式排列。具体修改如下：

1. 重构HTML结构 #

把每个按钮和它对应的说明文本放到同一个容器里，让两者的对齐关系天然绑定，避免错位：

<body>
  <h1>MedConnect</h1>
  <h2>Please select your Role</h2>
  <!-- 重构为包含按钮+文本的容器组 -->
  <div class="role-container">
    <div class="role-option">
      <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 class="role-option">
      <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>

  <script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
</body>

2. 调整CSS样式 #

用Flexbox实现整体响应式布局，同时保证每个按钮和文本的精准对齐：

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  font-family: Lora;
  text-align: center;
  margin-top: 100px;
  background-color: #DBE2EF;
}

h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

h2 {
  margin-top: 50px;
}

/* 整体容器：横向排列，自动换行，间距均匀 */
.role-container {
  display: flex;
  justify-content: center;
  gap: 80px; /* 用gap控制选项间距，比margin更稳定 */
  flex-wrap: wrap; /* 屏幕变小时自动换行 */
  margin-top: 200px;
}

/* 单个选项：纵向排列，内容居中 */
.role-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px; /* 固定宽度保证文本换行后仍对齐 */
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 50px;
  border-radius: 5px;
  background-color: #3498db;
  color: black;
  text-decoration: none;
  margin-bottom: 15px; /* 按钮和文本的间距 */
}

.btn span {
  font-size: 20px;
  padding-top: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 小屏幕适配：缩小按钮尺寸，优化显示 */
@media (max-width: 768px) {
  .btn {
    font-size: 35px;
  }
  .role-container {
    gap: 40px;
  }
}

修改说明 #

• 将按钮与对应文本绑定到同一容器，从根源解决对齐错位问题
• 用flex-wrap: wrap实现响应式换行，屏幕缩小时自动调整布局
• 用gap替代margin控制间距，布局逻辑更清晰稳定
• 给单个选项设置固定宽度，避免文本换行后出现布局混乱

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