` 内）和未设置 `flex-direction` 导致的文本错位问题，提供语义正确、样式可控的解决方案。

在 HTML 中，标题标签（如

）是 纯语义化块级元素 ，其内容模型仅允许 短语级内容（phrasing content），例如文字、、 等，不允许嵌套块级元素（如

、

、

）。您原始代码中将

直接写在

内部，属于 HTML 结构错误——尽管部分 浏览器 会“容错渲染”，但这会导致不可预测的布局行为、SEO 损害及无障碍访问失效。

此外，display: flex 默认采用 flex-direction: row（水平 排列），因此即使结构合法，子元素也会并排显示，而非上下堆叠。

✅ 正确做法：使用语义清晰的容器包裹标题与副文本，并显式声明垂直布局：

   
header
   
text that needs to be under the header
 

? 关键改进说明：

• 使用
  作为外层布局容器（非语义化但功能明确），内部用标准

  +

  组合，符合 HTML5 内容模型；

• 显式添加 flex-direction: column，确保子元素垂直堆叠；
• 为
  

  和

  分别设置 margin: 0 和 margin-top: 8px，精准控制间距（避免依赖默认 margin-bottom 的不确定性）；

• 补充 text-align: center 防止内联文本在 flex 容器中因换行或宽度变化而偏移。

⚠️ 注意事项：

• 切勿将
  、

  等块级元素嵌套进

  ～

  中——这是 W3C 规范明确禁止的；