如何在页面中心获得引导按钮？

Question

我希望我的按钮在页面中间对齐，但在使用我的代码时它不起作用。

我的代码：

button {
margin-left: auto;
margin-right: auto;
max-width: 100px;
}

Answer 1

您应该尽可能利用自定义CSS上的引导类。

在父母身上使用.text-center。

button 
{
  max-width: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
  <button>button</button>
</div>

或者如果您不想这样做，只需将.center-block（或display: block）添加到按钮即可。

button 
{
  max-width: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <button class="center-block">button</button>

Answer 2

尝试更改margin: 0 auto;

Answer 3

HTML：

<div>
    <button>
        Hello
    </button>
</div>

CSS：

button {
 margin-left: auto;
 margin-right: auto;
 max-width: 100px;
}

div {
 text-align: center;
}

Answer 4

您可以使用flexbox将其居中。

div {
    display: flex;
    align-items: center;
    justify-content: center;
}