水平对齐按钮

Question

我正在尝试使用CSS水平对齐一个按钮。以下是我的标记：

<button type="button" class="primary-button download-button">Download</button>

以下是我相关的CSS：

.primary-button {
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    color: #fff;
    border: 1px solid #004487;
    background-image: -webkit-gradient(linear, top, bottom, from(#5288bd), to(#2f659a));
    background-image: -webkit-linear-gradient(top, #5288bd, #2f659a);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255, 255, 255, .7);
    text-shadow: 0px -1px 0px black;
    cursor: pointer;
}

.download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    margin: 10px auto 0px auto;
}

然而，它仍然靠左对齐。 我认为设置 margin: 10px auto 0px auto; 会使其水平居中对齐，因为它现在是块级元素，但显然不起作用。 我还尝试将其包装在 div 中并使用 text-align: center，但也不起作用。

- James Dawson

---

在Chrome浏览器中，这对我有效（http://jsfiddle.net/PeeHaa/J8juB/）。 - PeeHaa

对我来说不行。同样是Chrome，版本19. :/ - James Dawson

你可以通过添加固定宽度来使其居中。 - Bob

尝试在按钮上设置float为none，并将容器的text-align设置为center。 - TrySpace

Answer 1

给按钮设置宽度。请查看此jsFiddle示例。

.download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    width: 130px;
    margin: 10px auto 0px auto;
}​

如果没有设置宽度，您试图将一个占满容器宽度的块级元素居中。通过显式设置宽度（例如，在按钮上设置130像素），边距居中规则就可以起作用。

- j08691

---

是的，margin: 0 auto 的技巧只有在为元素定义宽度时才有效。 - jeschafe

什么？我疯了吗？是 jsfiddle 出了问题吗？因为 OP 的代码对我来说可行：http://jsfiddle.net/PeeHaa/J8juB/？ - PeeHaa

@RepWhoringPeeHaa - 幸运的是，你没有疯掉，但是如果没有宽度规则，Chrome和Safari不会居中按钮。IE和FF则会。 - j08691

啊哈。我有Chrome 20和21，它们确实可以居中显示。Safari确实不行。谢了。现在我可以安心地死去了 ;) @j08691 - PeeHaa

Answer 2

实际上，如果两者都具有“position：relative”，则将“float”设置为“none”应该可以使用：

.container{
  text-align: center;
 }
.button{
  float: none;
}

- TrySpace