Need Help Centering

HTML-CSS
1

I feel ashamed asking this… but I am trying to get my email container so that it is centered on the page. Don’t I just use justify-content? Can someone please help me?

2

Yeah, flexbox can sometimes be a headache. You got the right mindset that the flex info should be inside of the parent element, but you have to set the width to a child element. I added another div with a class of child, just for place holding, and put that around your header, heading, and form tags. In CSS I called the child class and set that to a width of 50% and voila! Centered in the middle of the page.

</section>
<div id="email-container">
  **<div class="child">**
  <h1>Join HyperX!</h1>
  <p>Sign up with your email address to receive deals and updates</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email" required id="email" placeholder="Enter your email address"</input>
  <input id="submit" type="submit" value="Get Started" class="btn"</input>
**</div>**
</div>

#email-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.child{
  width: 50%;
  border: 1px solid black;
  text-align: center;
}

This video really helped me see the flexbox be used instead of just reading about it: https://www.youtube.com/watch?v=JJSoEo8JSnc&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=9&t=0s

3

Haha thank you! That makes sense now. Also, thanks for the video, that’ll help

1 Like