title: centering jquery-ui button
body: <p>Strange thing. I center a <code>div</code> inside another <code>div</code>, and all is fine until the inner <code>div</code> is changed to <code>.button</code>. Then it is not centered any more.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div style='width:100%;'&gt;
    &lt;div id='bt_click_me' class='button'&gt;Click&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#bt_click_me
  {
      width:100px;
      margin: 0 auto !important;
  }
  </code></pre>
  
  <p>When <code>bt_click_me</code> is a regular <code>div</code> with just a text, all is fine. when I do <code>$('.button').button()</code> then it changes into a nice jquery-ui button, but also moves to the left side of the outer <code>div</code>. Any clues?</p>