How to I center my submit button in CSS?

Question

I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:

create a label element selector to float to the left with block display set text alignment to right assign width of 8em set an appropriate amount of padding configure and input element and textarea element selectors with block display of 12em bottom margin

Here is the code I have so far:

form{
 float:left;
 display:block;
 text-align:right;
 width:8em;
}
input {
  display: block;
  margin-bottom:1em;
}
textarea#feedback {
  display: block;
  margin-bottom:1em;
}
.form{
margin-left: 12em;
}

<form role="form">
<div class="form">
<form>
 <label for="Name">Name*</label>
  <input type="form" name="Name" id="" value="" required><br>
  <label for="Email">Email*</label>
  <input type="email" name="email" id= value"" required> <br>
  <label for="Experience">Experience*</label>
  <textarea rows="2" cols="20">
  </textarea><br>
  <input type="submit" value="Apply Now">
  </div>
</form>

I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.

@DestinatioN, Bootstrap is best utilised with a good understanding of CSS and HTML. I am alway heistant to recomentd it to a CSS novice. — Jon P, Jul 27 '16 at 05:31

score 2 · Answer 1 · answered Jul 27 '16 at 05:06

First lets start with fixing your HTML.

This line is formatted wrong.

  <input type="email" name="email" id= value"" required>    <br>

Needs to be

<input type="email" name="email" id="" value="" required> <br>

To be.

    <form role="form">
    <div class="form">
    <form>
    <label for="Name">Name*</label><br>
    <input type="form" name="Name" id="" value="" required>
    <label for="Email">Email*</label><br>
    <input type="email" name="email" id="" value="" required>
    <label for="Experience">Experience*</label><br>
    <textarea rows="2" cols="20"></textarea><br>
    <input type="submit" value="Apply Now">
    </div>
    </form>

Now that we have that fixed as well as some spacing we can start on centering the submit button.

Now we will wrap the submit button with a div

<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>

Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.

.buttonHolder{ text-align: center; }

Final HTML:

<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>

Hitesh Misro · Accepted Answer · 2016-07-27T05:57:33.927

Here's the working fiddle: https://jsfiddle.net/qptgsc1e/

Just some minor changes, Replace this CSS and HTML and you're good to go.

If you want to see the code changes Check it here

form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}


<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required>  <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>

Thanks! I double checked my code and fixed it. Everything is working fine now. — Sarah Bartley, Jul 27 '16 at 22:38

score 0 · Answer 3 · answered Jul 27 '16 at 04:54

Check if this style works for you.

form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
  min-width: 180px;
}
label{
  display: block;
}
input {
  display: block;
  margin-bottom:1em;
}
input[type="submit"]{
  display: block;
  margin: auto;
  width: auto;
  min-width: 50px;
}
textarea#feedback {
  display: block;
  margin-bottom:1em;
}

<form role="form">
<div class="form">
<form>
 <label for="Name">Name*</label>
  <input type="form" name="Name" id="" value="" required><br>
  <label for="Email">Email*</label>
  <input type="email" name="email" id= value"" required> <br>
  <label for="Experience">Experience*</label>
  <textarea rows="2" cols="20">
  </textarea><br>
  <input type="submit" value="Apply Now">
  </div>
</form>

score 0 · Answer 4 · edited May 23 '17 at 12:22

0

please include style in the submit button.

<input type="submit" value="Apply Now" style="margin:0 auto;">

refer : center form submit buttons html / css

edited May 23 '17 at 12:22

Community

1
1

answered Jul 27 '16 at 04:59

Jees K Denny

531
5
27

Inline styles should be avoided unless there is no other option. This can easily be applied via a class or based on the existing markup `.form input[type="submit"]{margin:0 auto;}` – Jon P Jul 27 '16 at 05:15
I agree with @JonP inline styles are the last option to use. – Dustin Snider Jul 27 '16 at 05:19
inline styles that are overwrite right? definitely it can put into the class. – Jees K Denny Jul 27 '16 at 05:19

How to I center my submit button in CSS?

4 Answers4