三按钮响应式布局异常：大屏列布局下按钮居左未居中

问题根源 #

1. 大屏模式下，.split 容器仅切换了flex方向为横向，但未设置水平居中，导致按钮靠左排列
2. 按钮仅设置了宽度和行高，未限制宽高比例，大屏时宽度随容器拉伸变成长条形，无法保持方形
3. text-center 样式仅在大屏生效，小屏未确保按钮居中

修正后的代码 #

CSS 代码

/* 基础样式：小屏（纵向排列） */
.split {
  display: flex;
  flex-direction: column;
  gap: 50px; /* 用gap替代column-gap，兼容横竖布局 */
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 可选：让按钮垂直居中于视口 */
}

button {
  background: #ADCEAC;
  width: 250px; /* 固定宽度保证方形 */
  aspect-ratio: 1; /* 宽高比1:1，确保方形 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Tenor Sans", sans-serif;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

/* 大屏（横向排列） */
@media (min-width: 40em) {
  .split {
    flex-direction: row;
  }
}

HTML 代码

<div class="split">
  <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
  <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
  <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>

关键调整说明 #

• 用 aspect-ratio: 1 确保按钮始终为方形，替代原有的行高设置，更可靠
• .split 容器添加 justify-content: center 和 align-items: center，让按钮在横竖布局下都居中
• 移除多余的 .text-center 容器，直接通过flex布局实现居中，简化结构
• 用通用 gap 属性替代 column-gap，横竖布局下都能保持按钮间距一致

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