centering jquery-ui button

Strange thing. I center a div inside another div, and all is fine until the inner div is changed to .button. Then it is not centered any more.

html:

<div style='width:100%;'>
  <div id='bt_click_me' class='button'>Click</div>
</div>

css:

#bt_click_me
{
    width:100px;
    margin: 0 auto !important;
}

When bt_click_me is a regular div 开发者_运维问答with just a text, all is fine. when I do $('.button').button() then it changes into a nice jquery-ui button, but also moves to the left side of the outer div. Any clues?

I'm pretty sure this has to do with jQuery's CSS altering the behavior of the div by applying the ui-button class, which switches the div from a block to an inline-block, thus making the margin: 0 auto; style no longer a valid way to center it (inline elements cannot be centered with margin).

Try adding display: block; to your style, or add text-align: center; to your wrapper div.