-1

I've created a contact form using a CSS grid layout that has 4 input fields and a submit button over 2 columns.

2 of the input fields are 1fr and 2 input fields are 1/3 wide. I'm trying to center the submit button below the input fields. I've attached a screenshot o my figma design so you can see how I'm trying to position my submit button.

screenshot of my form design

After reading a few answers on stack overflow it seems that to use justify-content: center on the submit button I need to create a div container within the form that spans all columns 1/3 to place the button within. Then apparenly justify-content: center can be used. I've done this as other answers have suggested but I still can't get it working.

Does anyone know where I'm going wrong? 

/* Homepage Contact Form */

.container-form {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;
}

.homepage-contact {
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;
}

.contact-message {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;
}

.home-contact-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;
}

.home-contact-form form p {
  margin: 0.8rem;
}

.home-contact-form form .full {
  grid-column: 1 / 3;
}

.contact-btn-container {
  grid-column: 1/ 3;
  justify-content: center;
}

.home-contact-form form input {
  height: 4rem;
}

.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form {
  width: 100%;
}

input {
  padding-left: 1.5rem;
}

textarea {
  padding-left: 1.5rem;
}
<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
anon7491
  • 13
  • 2
  • Why don't you simply use ```.contact-btn {display: block; margin: 0 auto;}```? – AbsoluteBeginner Jan 01 '21 at 19:21
  • Because it doesn't work. – anon7491 Jan 01 '21 at 19:25
  • I've tried here: it works for me. What's your browser? – AbsoluteBeginner Jan 01 '21 at 19:26
  • @AbsoluteBeginner That would work based on the code OP provided; you should post it as an answer. – TylerH Jan 01 '21 at 19:52
  • It doesn't work for me in any browser. It simply moves the button to the center for the first column. The div container for the button is 1 / 3 so it should be one column that spans the whole width of the grid and the button should center on rail 2 – anon7491 Jan 01 '21 at 20:05
  • This is why I hate stack overflow. My question has been closed because apparently it's the same as a completely unrelated question. This question has nothing to do with centering a button within a div using flexbox. – anon7491 Jan 01 '21 at 20:08
  • @anon7491 It has to do with centering in a button within a div, which is what the target question asks and solves. – TylerH Jan 01 '21 at 20:14

2 Answers2

1

Just use .contact-btn {display: block; margin: 0 auto;}.

/* Homepage Contact Form */

.container-form {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;
}

.homepage-contact {
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;
}

.contact-message {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;
}

.home-contact-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;
}

.home-contact-form form p {
  margin: 0.8rem;
}

.home-contact-form form .full {
  grid-column: 1 / 3;
}

.contact-btn-container {
  grid-column: 1/ 3;
  justify-content: center; /* This can be removed */
}

.home-contact-form form input {
  height: 4rem;
}

.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form {
  width: 100%;
}

input {
  padding-left: 1.5rem;
}

textarea {
  padding-left: 1.5rem;
}

.contact-btn {
  display: block;
  margin: 0 auto;
}
<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>
AbsoluteBeginner
  • 2,160
  • 3
  • 11
  • 21
0
.contact-btn-container {
  position: relative;
  grid-column: 1/ 3;
  justify-content: center;
  left: 0;
  right: 0;
  margin: auto;
}
form .contact-btn{
  position: relative;
  width: 300px;
  height: 70px;
  background-color: blue;
  color: white;
}
hazarbilek
  • 1
  • 2