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

` 嵌套 `

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

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

首先，<h1> 是纯内容型块级标题元素，根据 HTML 规范（HTML5），它不允许嵌套 <div>、<p> 等非短语内容元素。虽然浏览器会“容错渲染”，但这种写法：

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

其次，您使用了 display: flex，但未显式声明 flex-direction。Flex 容器默认为 flex-direction: row（水平排列），因此 <h1> 内部的文本和 <div> 会被强制并排显示——这正是“文字被挤到屏幕边缘”的根本原因。

✅ 正确做法是：用语义清晰的容器包裹标题与副文本，并设置垂直 Flex 布局。推荐使用 <header> 或 <div> 作为外层容器（非标题标签），再通过 flex-direction: column 实现上下堆叠：

吐槽大师

吐槽大师（Roast Master） - 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin

下载

<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>

? 优化说明：

• 使用 <header> 语义化包裹，内部 <h1> 保持标题语义，<p> 合理表达段落文本；
• margin: 0 移除 <h1> 和 <p> 默认外边距，避免意外间距；
• text-align: center 确保文字居中（align-items: center 对 flex 子项生效，但文本对齐仍需此属性）；
• 推荐用 <p> 替代 <div> 表达普通文本，增强语义与可维护性。

⚠️ 注意事项：

• 避免在 <h1>—<h6> 中嵌套任何块级容器（如 <div>、<section>）；
• Flex 布局中，flex-direction 必须显式设置为 column 才能实现垂直堆叠；
• 如需响应式适配，可在媒体查询中动态调整 font-size 或 gap（推荐使用 gap: 12px 替代手动设 margin）。

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