为什么我的<h1>和<p>标签在同一行上？

Question

我无法从与h1标签相同的行中获取p标签文本

目前看起来是这样的：

**Title**paragraph

我希望它是这样的：

**Title**
paragraph

HTML和CSS:

.texttitle {
font-family: Serif;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
animation: color-change 3s infinite;
}
@keyframes color-change {
0% { color:#CE9FFC ; }
25% { color: #8C1BAB; }
50% { color:#2411ee; }
75% { color:#8C1BAB; }
100% { color:#CE9FFC; }
}

<div class="texttitle">
<h1 class="title"><strong>Title</strong></h1>
<p class="paragraph">paragraph under title</p>
</div>

Answer 1

Declaring.texttitle{display: flex;}已将该div放入flex容器中。因此，您的<h1>和<p>是弹性项目。默认的弹性方向是行，因此您的两个弹性项在同一行上对齐。

如果<h1>和<p>是.texttitlediv中仅有的两个项目，那么您可以简单地添加

flex-direction: column;

添加到您的.texttitle CSS。

Answer 2

在这里查看实际发生了什么。通过提供

.texttitle {
display: flex;
}

您将div设置为flex框，在flex框中，子元素默认对齐为水平行。

弹性盒中弹性方向的默认值为

flex-direction : row;

现在通过设置使其垂直对齐

flex-direction : column;

在你的课堂文本标题中。

在您的代码中，您还可以通过移除显示器来实现所需的对齐：flex；从类文本标题

display: flex

Answer 3

因为您在flex容器中添加了两个标签，哪个类是texttitle。在默认的flex容器中，所有元素并排显示。如果要在新行中显示其他元素，请在texttitle类中添加此属性：

flex-direction : column;

Answer 4

.texttitle {
font-family: Serif;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
animation: color-change 3s infinite;
}
@keyframes color-change {
0% { color:#CE9FFC ; }
25% { color: #8C1BAB; }
50% { color:#2411ee; }
75% { color:#8C1BAB; }
100% { color:#CE9FFC; }
}

<div class="texttitle">
<h1 class="title"><strong>Title</strong></h1>
<p class="paragraph">paragraph under title</p>
</div>