本文详解如何通过语义化 html 结构与现代 css flexbox 实现“team 1”“team 2”标题严格居中于对应按钮列上方，并确保在不同屏幕尺寸下保持视觉对齐与可维护性。
本文详解如何通过语义化 html 结构与现代 css flexbox 实现“team 1”“team 2”标题严格居中于对应按钮列上方，并确保在不同屏幕尺寸下保持视觉对齐与可维护性。
要实现标题与按钮堆栈的精准垂直对齐（尤其在响应式场景下），关键在于摒弃全局 text-align: center 和嵌套错误的 <h1></h1> 标签，转而采用语义清晰、结构可控的双列 Flex 布局。
首先修正 HTML 结构缺陷：原代码中 <h1></h1> 标签未正确闭合（<h1><h1></h1></h1>），且滥用多个一级标题。根据 HTML 文档结构规范，页面应仅有一个 <h1></h1> 作为主标题，团队名称改用 <h2></h2> 更语义合理；同时为每组按钮容器添加 data-team 属性，便于后续逻辑绑定。
<div class="full-scbd">
<h1 id="scoreboard" class="text-center">Rugby Scoreboard!</h1>
<div class="flex-row space-around">
<!-- Team 1 Column -->
<div class="flex-col text-center" data-team="1">
<h2 class="teams" id="team1">Team 1</h2>
<button class="btn-one try-btn">TRY!</button>
<button class="btn-one converted-btn">Converted!</button>
<button class="btn-one penalty-btn">Penalty/Drop Goal</button>
</div>
<!-- Team 2 Column -->
<div class="flex-col text-center" data-team="2">
<h2 class="teams" id="team2">Team 2</h2>
<button class="btn-two try-btn">TRY!</button>
<button class="btn-two converted-btn">Converted!</button>
<button class="btn-two penalty-btn">Penalty/Drop Goal</button>
</div>
</div>
</div>
CSS 需聚焦于局部控制与弹性流式布局：
-
.flex-row+justify-content: space-evenly确保两列在容器内均匀分布； - 每列使用
.flex-col（flex-direction: column）使标题与按钮自然垂直堆叠； -
.text-center仅作用于列容器，保证内部所有子元素（含<h2></h2>和<button></button>）水平居中； - 移除
body { text-align: center }，避免影响全局排版逻辑。
.flex-row, .flex-col {
display: flex;
}
.flex-col {
flex-direction: column;
}
.space-around {
justify-content: space-evenly; /* 或 space-between / space-around */
}
.text-center {
text-align: center;
}
button {
margin: 10px auto;
width: 100px;
border-radius: 50%;
padding: 10px;
text-shadow: 0 0 1px black;
border: 1px solid black;
}
.btn-one { background-color: red; color: white; }
.btn-two { background-color: lightyellow; color: red; }
最后，强烈推荐弃用内联 onclick，改用事件委托或批量监听提升可维护性：
// 统一处理所有按钮点击，自动识别所属队伍
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', function() {
const team = this.closest('[data-team]').getAttribute('data-team');
const action = this.textContent.trim().toLowerCase().replace(/[^a-z]/g, '');
console.log(`Team ${team} — ${action} triggered`);
// 此处接入实际计分逻辑
});
});
✅ 关键注意事项：
- 避免重复类名（如
.first-set/.second-set），用语义化类（.try-btn,.converted-btn）替代； - 所有按钮宽度固定（
100px）+ 圆角（50%）已天然支持居中，无需额外margin: auto； - 在移动端，可为
.flex-row添加flex-wrap: wrap并配合媒体查询调整flex-basis，实现堆叠式响应布局； - 始终验证 DOM 结构有效性——使用浏览器开发者工具检查嵌套层级与属性继承是否符合预期。
此方案不仅解决标题对齐问题，更构建了可扩展、易测试、符合无障碍标准的交互式记分板基础架构。
