Center Form Button in Chrome - html

Question

Here is the code for a form that I have on my page:
<form id="form2" action="processRegister.php" method="post" onsubmit="return checkRegister()">
<h4>Register</h4>
<div class="reminder">Already registered? Sign in below.</div>
<div id="sMessage"></div>
<div class="field"><label>First Name:</label><input class="input" type="text" name="firstName" /></div>
<div class="field"><label>Last Name:</label><input class="input" type="text" name="lastName" /></div>
<div class="field"><label>Email (.edu):</label><input class="input" type="text" name="email" /></div>
<div class="field"><label>Password:</label><input class="input" type="password" name="password" /></div>
<div class="field"><label>Confirm Password:</label><input class="input" type="password" name="cPassword" /></div>
<div class="field"><input class="submit" type="submit" value="Register"/></div>
</form>
And here is the relevant css:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
}
This centers the submit button in FF but not Chrome. How can I fix this?

Answer 1

Either give the submit button a width, or set the parent div to have text-align:center and remove display:block on the submit button.
jsFiddle example (button has width)
jsFiddle example (parent has text-align center)
The text-align property only affects inline elements, so that's why you'd need to remove the display:block from the input element. The margin:0 auto centering trick only works on elements that have a width.

Answer 2

Try
HTML:
<div class="submit-container field">
<input class="submit" type="submit" value="Register"/>
</div>
CSS:
.submit
{
background-color:#30BEB4;
border: 1px solid #000000
}
.submit-container {
text-align: center;
}
​

Answer 3

you could fake it with
margin:0 45%;
width:10%;

Answer 4

Try setting the width of the button: http://jsfiddle.net/hg7KV/1/
.submit
{
width: 100px;
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000;
}​

Answer 5

You must add width of to your submit class:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
width: 60px;
}
http://jsfiddle.net/PPDLC/2/

Answer 6

It works if you only add a width attribute to your .submit class. For example add "width: 100px;".
Probably Chrome needs dimensions to position its elements whereas Firefox does it anyway.