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

` 嵌套 `

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

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

首先，

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

、

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

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

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

内部的文本和

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

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

或

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

<header style="
  font-family: 'Roboto', sans-serif;
  color: white;
  display: flex;
  flex-direction: column;   /* 关键：改为垂直方向 */
  align-items: center;
  justify-content: center;
  text-align: center;
">
  <h1 style="font-size: 64px; margin: 0;">header</h1>
  <p style="font-size: 14px; margin: 8px 0 0 0;">text that needs to be under the header</p>
</header>

? 优化说明：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 使用
  语义化包裹，内部

  保持标题语义，

  合理表达段落文本；

• margin: 0 移除

  和

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

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

  替代

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

  ⚠️ 注意事项：

  • 避免在

    —

    中嵌套任何块级容器（如

    、

    ）；

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

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

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