How to I center my submit button in CSS? - html

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css