以jquery-ui为中心

Question

奇怪的是。我将div置于另一个div内，一切正常，直到内部div更改为.button。然后它不再居中。

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;
}

如果bt_click_me是一个只有文字的常规div，那么一切都很好。当我做$('.button').button()然后它变成一个漂亮的jquery-ui按钮，但也移动到外部div的左侧。有线索吗？

Answer 1

我很确定这与jQuery的CSS有关，通过应用ui-button类来改变div的行为，该类将div从block切换为inline-block，从而使margin: 0 auto;样式不再是使其居中的有效方式（内联元素不能以margin为中心。）

尝试将display: block;添加到您的样式中，或将text-align: center;添加到您的包装器div。