Question

如何在没有任何＆＃34;保证金欺骗的情况下将我的按钮放在中心位置＃34; （例如设置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;，我就没有设置void foo() { int x = 0; { std::lock_guard<std::mutex> lock(g_mutex); std::cout << x << std::endl; } x = 1; }，在我的情况下，将按钮置于文本中心，请帮助我删除这个＆＃34;保证金作弊＆＃34;并以正确的方式做到这一点。

Answer 1

a就像文字一样，当您将text-align:center;提供给其父级时，它会被置于其父级的中心。

您无需将margin提供给a元素。您可以使用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>

Answer 2

如果您将按钮的位置设置为绝对，请为其设置一个设置的宽度，并添加它应该居中：

left: 50%; right: 50%;

Answer 3

你试试这个：

<center><a href="#" class="bannerButton">Products</a></center>

我不确定它对你有帮助..

我的按钮的位置如何在没有任何＆＃34;保证金欺骗的情况下居中？＃34 ;?

3 个答案: