如何让带标题的按钮组水平并排且居中显示-html教程-PHP中文网

如何让带标题的按钮组水平并排且居中显示

使用 Flexbox 布局，为按钮容器添加 display: flex 和 flex-direction: row，再配合 gap 与 justify-content: center，即可实现多组“标题+按钮”垂直堆叠、组间水平并排、整体居中的效果。

使用 flexbox 布局，为按钮容器添加 `display: flex` 和 `flex-direction: row`，再配合 `gap` 与 `justify-content: center`，即可实现多组“标题+按钮”垂直堆叠、组间水平并排、整体居中的效果。

要实现如图所示的布局——每组包含一个顶部小标题（如 "Default"）和两个垂直排列的按钮，且多组按钮水平并排、整体在页面中居中对齐——关键在于双重 Flexbox 结构：外层控制组间横向排列，内层控制组内标题与按钮纵向堆叠。

首先，修正 HTML 结构：原 .buttons 容器内直接嵌套了两个 .button-default 和 .button-hovered，但它们缺少统一的语义化容器类。应将每组封装为独立的 .button-container，便于样式复用与控制：

<h2 class="section-title">BUTTONS</h2>
<div class="buttons">
  <div class="button-container button-default">
    <small class="btn-label">Default</small>
    <button>Primary Button</button>
    <button>Secondary Button</button>
  </div>
  <div class="button-container button-hovered">
    <small class="btn-label">Hovered</small>
    <button>Primary Button</button>
    <button>Secondary Button</button>
  </div>
</div>

接着，应用以下 CSS 实现精准布局：

.buttons {
  display: flex;
  flex-direction: row;
  gap: 20px; /* 组与组之间的水平间距 */
  justify-content: center; /* 整体水平居中 */
  margin: 2rem auto; /* 可选：增加上下外边距，提升视觉呼吸感 */
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 标题与按钮、按钮之间的垂直间距 */
  align-items: center; /* 确保组内所有子元素（包括按钮）水平居中 */
}

/* 基础按钮样式（可选优化） */
.button-container button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
}

✅ 关键要点说明：

justify-content: center 作用于 .buttons，使两组容器在父容器中水平居中；
align-items: center 作用于 .button-container，确保 <small></small> 标题和 <button></button> 元素在组内水平对齐（避免因按钮宽度不一导致错位）；
gap 替代传统 margin，更简洁可控地管理间距，且自动避开首尾冗余；
无需设置固定宽度或浮动，Flexbox 天然响应式，适配不同屏幕尺寸。