Why isn't my submit button centered?

Question

For some reason my submit button isn't centered. http://prime.programming-designs.com/test_forum/viewboard.php?board=0

#submitbutton{
margin: auto;
border: 1px solid #DBFEF8; 
background-color: #DBFEF8; 
color: #000000; 
margin-top: 5px; 
width: 100px; 
height: 20px;
}

here's the html.

<form method=post action=add_thread.php?board=<?php echo''.$board.''; ?>>
            <div id="formdiv">
                <div class="fieldtext1">Name</div>
                <div class="fieldtext1">Trip</div> 
                <input type="text" name=name size=25 /> 
                <input type="text" name=trip size=25 />
                <div class="fieldtext2">Comment</div>
                <textarea name=post rows="4" cols="70"></textarea>
                <div class="fieldtext2">Fortune</div>
                <input type="checkbox" name="fortune" value="fortune" />
            </div>
            <input type=submit value="Submit" id="submitbutton">
        </form>

Answer 1

Because the button is displayed inline. You have to set display:block for #submitbutton :)

Answer 2

You can try positioning it at left: 50%; and give it a negative margin of 50px to the left (since it is 100px wide). This is not an explanation as to why it is not cenetered but could be a solution to center it.

Answer 3

Wrap your button in a div like this:

<div style="text-align: center;">
    <input type="submit" value="Submit" id="submitbutton">
</div>

and get rid of the display: block on the button.

EDIT: And of course you have to make the container as wide as the container you want it to center against so add width: 50%; margin: 0 auto; to the div also. Like:

<div style="text-align: center; width: 50%; margin: 0 auto;">
    <input type="submit" value="Submit" id="submitbutton">
</div>

OR even better! Put the wrapper div inside of the <div id="formdiv">

<div id="formdiv">
    .
    .
    .
    <div style="text-align: center;">
        <input type="submit" value="Submit" id="submitbutton">
    </div>
</div>

Answer 4

Hi,

Move the Margin:auto and width:50% to the form css, instead on in the #formdiv.

So the CSS will be something like this:

FORM {
   margin: 0px auto;
   width: 50%;
}

#formdiv {
  background-color:#F9F9F9;
  border:1px solid #DBFEF8;
}