Can't center a paragraph in a div - html

Question

I have tried using flexbox to center a couple buttons and a p but I'm having some troubles.
I have this code
.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.loginSection p {
display: flex;
align-items: center;
margin: 16px 0;
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
But I can center the p
| | Log-In | |
|Enter your email |
| | Continue | |

Answer 1

.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.layout p {
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
color: white;
margin: auto;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>

Answer 2

Flexbox is typically used by setting flex properties on the parent container to affect the layout of the children inside of that container.
It looks like you're adding display: flex and align-items: center on the .loginSection p element, when flex properties should be set on the parent .loginSection.
If your intention is to center all the elements inside of the .loginSection horizontally, then you can get rid of the flex properties on the children, and add the following rules:
.loginSection {
display: flex;
flex-direction: column;
justify-content: center;
// ... other styles here
}

Answer 3

You'll want to add display:flex with flex-direction: column and align-items:center to the .loginSection container.
Typically when using flex, you flex the container and then the children become "flex-items" rather than flexing the items themselves.
.loginSection {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items:center;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
Or if you want them to all be stretched out use align-items:stretch
.loginSection {
margin: 0 auto;
padding: 1rem; /* optional if you don't want it to stretch the whole width */
display: flex;
flex-direction: column;
align-items:stretch;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>