center align button with textbox inside div

Problem

I have created a form with a textbox input and a button beneath. The form is placed inside a div. Both inputs have the same width (200px) and the div content is aligned to the center using the "text-align" attribute.

However the button does not appear to be center aligned with the textbox, but rather a bit to the right. I have also tried "text-align" on the form, but this is also not working.

here is the fiddle: http://jsfiddle.net/leandri/LVsw8/1/

here is the HTML:

<div id="div">
    <form id="form">
        <input id="text" type="textbox"/>
        <br/>
        <input id="button" type="button" value="submit"/>
    </form>
</div>

here is the CSS:

#div {
    text-align: center;
}
#text {
    width: 200px;
}
#button {
    width: 200px;
}
Problem courtesy of: Leandri Midori Viviers

Solution

Inline elements are sensitive to white space in your code. Remove them and they align properly.

<div id="div">
    <form id="form">
        <input id="text" type="textbox" /><br/><input id="button" type="button" value="submit" />
    </form>
</div>

jsFiddle example

Solution courtesy of: j08691

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.