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

使用 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;}

关键要点说明：

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

? 进阶提示：若后续需支持更多按钮组（如 3–4 组），建议为 .buttons 添加 flex-wrap: wrap 并设定 max-width，配合媒体查询实现移动端堆叠布局，进一步提升可访问性与兼容性。