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.