0

Ive got a button I cannot align to center. I think it has something to do with the margins set by the parent object but I cant work out a way to override the margin. Ive tried setting it to 0 but that still wont allow me to center it.

.contact h1 { 
  text-align: center; 
  padding-top: 4rem;
  font-size: 4vh; 
  text-decoration: underline #4c6bc1; 
}

.contact-form {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 60%;
}

.contact-form input, textarea {
  font-family: 'Roboto', sans-serif; 
  font-size: 3vh;
  width: 100%;
  margin: 1rem;
}

.contact-form textarea {
  height: 100%;
}

.contact-form button {
  margin-left: 1rem;
  width: 50%;
}
<section class="contact">
    <h1>Contact</h1>
    <div class="contact-form">
        <form action="https://formsubmit.co/email@gmail.com" method="POST">
            <input type="name" size="100%" name="name" placeholder="Enter your name:" required>
            <input type="email" name="email" placeholder="Enter your email:" required>
            <textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
            <input type="hidden" name="_next" value="#">
            <button type="submit">Submit</button>
        </form>
    </div>  
</section>
Terry
  • 63,248
  • 15
  • 96
  • 118
Josh Haywood
  • 53
  • 2
  • 7

3 Answers3

0

You can set your button element to a block-level element and use auto for the horizontal margins:

.contact-form button {
  margin: 0 auto;
  display: block;
  width: 50%;
}

See proof-of-concept below:

.contact h1 { 
  text-align: center; 
  padding-top: 4rem;
  font-size: 4vh; 
  text-decoration: underline #4c6bc1; 
}

.contact-form {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 60%;
}

.contact-form input, textarea {
  font-family: 'Roboto', sans-serif; 
  font-size: 3vh;
  width: 100%;
  margin: 1rem;
}

.contact-form textarea {
  height: 100%;
}

.contact-form button {
  margin: 0 auto;
  display: block;
  width: 50%;
}
<section class="contact">
    <h1>Contact</h1>
    <div class="contact-form">
        <form action="https://formsubmit.co/email@gmail.com" method="POST">
            <input type="name" size="100%" name="name" placeholder="Enter your name:" required>
            <input type="email" name="email" placeholder="Enter your email:" required>
            <textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
            <input type="hidden" name="_next" value="#">
            <button type="submit">Submit</button>
        </form>
    </div>  
</section>
Terry
  • 63,248
  • 15
  • 96
  • 118
0

.contact h1 { 
  text-align: center; 
  padding-top: 4rem;
  font-size: 4vh; 
  text-decoration: underline #4c6bc1; 
}

.contact-form {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 60%;
}

.contact-form input, textarea {
  font-family: 'Roboto', sans-serif; 
  font-size: 3vh;
  width: 100%;
  margin: 1rem;
}

.contact-form textarea {
  height: 100%;
}

.contact-form button {
  margin: auto;
  display: block;
  text-align: center;
}
<section class="contact">
    <h1>Contact</h1>
    <div class="contact-form">
        <form action="https://formsubmit.co/email@gmail.com" method="POST">
            <input type="name" size="100%" name="name" placeholder="Enter your name:" required>
            <input type="email" name="email" placeholder="Enter your email:" required>
            <textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
            <input type="hidden" name="_next" value="#">
            <button type="submit">Submit</button>
        </form>
    </div>  
</section>
BiswajitPaloi
  • 586
  • 4
  • 16
0

I add to the form flex, then it affects the button

.contact h1 { 
  text-align: center; 
  padding-top: 4rem;
  font-size: 4vh; 
  text-decoration: underline #4c6bc1; 
}

.contact-form {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 60%;
}

.contact-form input, textarea {
  font-family: 'Roboto', sans-serif; 
  font-size: 3vh;
  width: 100%;
  margin: 1rem;
}

.contact-form textarea {
  height: 100%;
}

.contact-form button {
  margin-left: 1rem;
  width: 50%;
}
form{
display:flex;
justify-content:center;
align-items:center;
flex-flow:column
}
<section class="contact">
    <h1>Contact</h1>
    <div class="contact-form">
        <form action="https://formsubmit.co/email@gmail.com" method="POST">
            <input type="name" size="100%" name="name" placeholder="Enter your name:" required>
            <input type="email" name="email" placeholder="Enter your email:" required>
            <textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
            <input type="hidden" name="_next" value="#">
            <button type="submit">Submit</button>
        </form>
    </div>  
</section>
Yarin Levi
  • 201
  • 1
  • 10