title: center align button with textbox inside div
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>here is the fiddle:
  <a href="http://jsfiddle.net/leandri/LVsw8/1/" rel="nofollow">http://jsfiddle.net/leandri/LVsw8/1/</a></p>
  
  <p>here is the HTML:</p>
  
  <pre><code>&lt;div id="div"&gt;
      &lt;form id="form"&gt;
          &lt;input id="text" type="textbox"/&gt;
          &lt;br/&gt;
          &lt;input id="button" type="button" value="submit"/&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the CSS:</p>
  
  <pre><code>#div {
      text-align: center;
  }
  #text {
      width: 200px;
  }
  #button {
      width: 200px;
  }
  </code></pre>