title: Content of Div Wrapper Won't Center (Horizontal Align)
body: <p>I've been trying to figure out forever now why my wrapper div (#searchContents) that I want to use to center four items (text [#inputPrompt], input box [#accountName], submit button [#submit], loading image [#wait]) inside another div (#searchBox) won't work properly.</p>
  
  <p>Here's the HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="searchBox"&gt;
          &lt;div id="searchContents"&gt;
              &lt;span id="inputPrompt"&gt;Account Name:&lt;/span&gt; &lt;input type="text"
                  id="accountName" /&gt;
              &lt;button id="submit"&gt;Submit&lt;/button&gt;
              &lt;img id="wait" src="images/ajax-loader.gif" alt="Loading..." /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#searchBox {
      background-color: #181818;
      width: 30%;
      padding: 10px;
      border: 1px solid #383838;
      border-radius: 4px;
      margin-top: 5%;
      margin-left: auto;
      margin-right : auto;
      margin-bottom: 15px;
  }
  #searchContents {
      margin-left: auto;
      margin-right: auto;
  }
  #inputPrompt {
      vertical-align: middle;
      line-height: 16px;
  }
  #accountName {
      margin-right: 10px;
      margin-left: 10px;
      vertical-align: middle;
      line-height: 16px;
      height: 16px;
  }
  #submit {
      width: 20px;
      height: 20px;
  }
  #wait {
      vertical-align: middle;
      margin-left: 10px;
  }
  </code></pre>
  
  <p>The "#searchContents" is the wrapper, so I set the margin-left and margin-right properties to horizontally align everything within the wrapper, but it still seems to all be left-aligned.</p>
  
  <p>Can anyone point me to the issue and the solution?</p>
  
  <p>Here's a fiddle of the above code: <a href="http://jsfiddle.net/T58rc/2/" rel="nofollow">http://jsfiddle.net/T58rc/2/</a></p>