本文讲解如何修复 html 中因误用语义化标签（如 `

` 嵌套 ``）和 flexbox 默认方向导致的文本错位问题，提供语义合规、样式可控的解决方案。

在 HTML 开发中，将辅助文本（如副标题、说明文字）精准置于主标题正下方，看似简单，却常因两个关键错误导致布局异常：语义错误与Flex 方向误解。

首先，

是纯内容型块级标题元素，根据 HTML 规范（HTML5），它不允许嵌套 、

等非短语内容元素。虽然浏览器会“容错渲染”，但这种写法：

• 违反语义化原则，影响可访问性（如屏幕阅读器无法正确解析结构）；
• 可能触发不可预测的样式继承或盒模型行为；
• 在严格模式或未来标准中可能被拒绝解析。

其次，您使用了 display: flex，但未显式声明 flex-direction。Flex 容器默认为 flex-direction: row（水平排列），因此

内部的文本和 会被强制并排显示——这正是“文字被挤到屏幕边缘”的根本原因。

✅ 正确做法是：用语义清晰的容器包裹标题与副文本，并设置垂直 Flex 布局。推荐使用

或 作为外层容器（非标题标签），再通过 flex-direction: column 实现上下堆叠：

  
header
  
text that needs to be under the header

? 优化说明：

• 使用
  语义化包裹，内部

  保持标题语义，

  合理表达段落文本；

• margin: 0 移除

  和

  默认外边距，避免意外间距；

• text-align: center 确保文字居中（align-items: center 对 flex 子项生效，但文本对齐仍需此属性）；
• 推荐用

  替代

  表达普通文本，增强语义与可维护性。

  ⚠️ 注意事项：

  • 避免在

    —

    中嵌套任何块级容器（如 、

    ）；

    Flex 布局中，flex-direction 必须显式设置为 column 才能实现垂直堆叠；

    如需响应式适配，可在媒体查询中动态调整 font-size 或 gap（推荐使用 gap: 12px 替代手动设 margin）。

    遵循以上结构，即可确保文本稳定、语义正确、样式可控地显示在标题正下方。