Question

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?

Answer 1

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.