Unable to center a submit, what am I doing wring

HTML & CSS
1

HTML below

                    <div id="forms">
                    <form method="post" action="member.php?sel=create_account">
                        <h1>Create Your Free Account</h1>
                        <span>Enter your details below, all information remains private.</span>
                        <hr>
                        <fieldset>
                            <label for="username">Username:</label>
                            <input type="text" name="username" id="username" placeholder="Enter your full name" autofocus size="30" maxlength="30"  />
                            <label for="password">Password:</label>
                            <input type="password" name="password" id="password" size="30" maxlength="30" />
                            <label for="email">Email Address:</label>
                            <input type="text" name="email" id="email" size="50" maxlength="50" />
                            
                        </fieldset>
                        <input type="submit" name="register" id="register" value="Register" />
                    </form>
                </div>

And the associated CSS

    #forms input[type=submit] {
    display: block;
    width: 120px; 
    height: 30px; 
    padding: 5px 15px;
    margin: 0, auto;
    color: #374552;
    border: 1px solid #556f8c;
    background: -moz-linear-gradient(top, #8f99a3 0%, #adb3b9 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f99a3), color-stop(100%,#adb3b9)); /* webkit */
    cursor: pointer;
}

No idea what is wrong here

2

These two properties should do it

display: block;
margin: 0, auto;

So I’m not sure.
Is the selector working and applying the other properties?
The id selector name seems odd to me. To use the word “forms”, as in plural for an id seems strange.
I know grammar and css are totally unrelated things, but something is amiss somewhere.
The fact you are using an id selector does lessen the odds of a specificity problem, unless that is you are using ids willy-nilly all over the place, in which case specificity may be the issue.
But there is nothing apparent from the snippet of code we can see.

3

I agree with @sama74.

It is never a good idea to use words that may mean something for the engine, even if it is in plural form.

I have to say that it may have something to do with the CSS of the parent (the form) or the div that wraps everything. Can we have the full CSS?

4

Try removing the comma. It should be margin: 0 auto;

4 Likes
5

You’re so right that I’m thinking that I’m going to write on the wall “pay attention to the comma” 10 times (if you expected more, sorry, you’re out of luck) :stuck_out_tongue:

2 Likes
6

Thanks Dude :flushed:

For those wondering about the plural, the CSS code is for all forms across a fairly large and complex app, ergo it was for no apparent reason deemed we should use plurals.

7

Me too.

It was just that an id should be unique (to a page) so the plural id seemed a strange choice.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.