html - 如果没有任何类型的 "margin cheat"，我的按钮位置如何居中？

Question

我怎样才能把我的按钮放在中间而不用任何类型的“margin cheat”(例如设置 margin-left: 525px;)？

HTML

<div id="banner">
    <div id="bannerContainer">
        <h1>H1 tag</h1>
        <a href="#" class="bannerButton">Products</a>
    </div>
</div>

CSS

    .bannerButton {
    border: 2px solid #fff;
    color: #fff;
    font-weight: 300;
    font-family: 'Raleway';
    font-size: 20px;
    display: inline-block;
    background-color: rgb(63, 127, 191);
    padding: 18px 60px 18px 50px;
    margin-bottom: 50px;
    margin-top: 50px;
    position: relative;
    margin-left: 525px;
}
.bannerButton:hover {
    text-decoration: none;
    background: #eaf;
    color: #fff;
}

我试过让它位于中间，但如果不设置 margin-left; 效果就不太好； 525px;，在我的例子中，按钮在文本下方居中，请帮助我删除这个“边距作弊”并以正确的方式进行。

Answer 1

a 的行为类似于文本，这意味着当您将 text-align:center; 指定给其父级时，它将位于其父级的中心。

您不需要为 a 元素提供 margin。您可以使用 text-align:center;。

#bannerContainer
{
  text-align:center;
}

    .bannerButton {
    border: 2px solid #fff;
    color: #fff;
    font-weight: 300;
    font-family: 'Raleway';
    font-size: 20px;
    display: inline-block;
    background-color: rgb(63, 127, 191);
    padding: 18px 60px 18px 50px;
    margin-bottom: 50px;
    margin-top: 50px;
    position: relative;
}
.bannerButton:hover {
    text-decoration: none;
    background: #eaf;
    color: #fff;
}

<div id="banner">
    <div id="bannerContainer">
        <h1>H1 tag</h1>
        <a href="#" class="bannerButton">Products</a>
    </div>
</div>