Cannot set p vertically - html

Question

I want display the text on a new line for every p tag, so I did:
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday *
{
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title
{
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle
{
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
but the p tag are displayed on the same line.. What I did wrong?

Answer 1

It sounds like your p tag's widths are set to less than 100% and/or your p tags are set to a display of inline or inline-block.
In your CSS file, try this:
p {
display: block;
width: 100%;
}
If that doesn't work, you can always add br tags at the end of each p tag, but you really shouldn't have to do that.

Answer 2

Add A br tag in the middle of the p tags so they don't show up on the same line

Answer 3

<p> tags are block level elements, and therefore you don't need <br> tags. Your code seems to work for me...
.create-holiday * {
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title {
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>

Answer 4

<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday * {
margin-top: 100px;
display: flex; //make it flex
align-items: center; //flex middle vertical align
justify-content: center; //flex center align
}
.create-holiday-title {
width: 297px;
height: 22px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}