我的文字不在标题下方答案

【问题标题】：My text is not going right under my header我的文字不在标题下方
【发布时间】：2023-02-01 02:42:56
【问题描述】：

我试图在标题下方添加我的文本，但它在屏幕边缘被压扁了。代码：

<h1 style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 64px;">
  header

  <div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 14px;">
    text that needs to be under the header
  </div>
</h1>

我尝试删除 div，但随后文本位于其下方的文本之上。我试图让它在我的标题下。

【问题讨论】：

删除显示：flex

标签： html

【解决方案1】：

你的错误是

像 h1 或 p 这样的标签只能作为子标签，你不能将它们用作父标签（我不知道为什么它没有向你显示任何错误） 2.当你使用 flex 时，它默认采用 flex-direction:raw ，你必须将其添加为“flex-direction:column”

<div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 64px;" >
header
<div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 14px;" >
text that needs to be under the header
</div>
</div>

只要这样做，你就会一切都好！

希望你能理解...

【讨论】：

是的，但我希望文本位于标题下方。

【解决方案2】：

不确定我明白你的意思，但你为什么不把 div 移到 h1 标签之外：

<h1 style="font-family: 'Roboto', sans-serif; color: white; display: flex; align-items: center; justify-content: center; font-size: 64px;">
    header         
</h1>
<div style="font-family: 'Roboto', sans-serif; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px;">
    text that needs to be under the header
</div>

https://jsfiddle.net/0y5umnoz/

【讨论】：