html - CSS 按钮不会水平居中

Question

我似乎无法将我的两个按钮水平居中。

我尝试将以下内容添加到 landingpage-button 元素:

margin: 0 auto;


margin-left: auto;  
margin-right: auto;

我也试过删除完整的边距部分。

这是HTML代码

<div class="landingpage-title">WELCOME TO NOVA PLASTOS</div>


<div>
    <a href="#" class="landingpage-button left">Nova Plastos Blog</a>
    <br />
    <br />
    <a href="#" class="landingpage-button right">Nova Plastos News</a>
</div>

这是 HTML 代码，请注意，为了便于阅读，我已经删除了字体特定的 CSS 代码(例如颜色、系列和大小)

.landingpage-title {
    width: 1200px;
    text-align: center;
    margin: 180px auto;
}

.landingpage-button {
    background-color: black;
    border: 1px solid white;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 32px;
    display: inline-block;
    text-align: center;
}

.landingpage-button:link {
    text-decoration: none;
}

.landingpage-button.left:link {
    font-family: Georgia;
}


.landingpage-button.right:link {
    font-family: sans-serif;
    font-weight: bold;
}

.landingpage-button:hover {
    color: black;
    background-color: white;
}

Answer 1

以margin: 0 auto;为中心您需要将这些“按钮”声明为 display:block;

.landingpage-button {
    margin: 0 auto;
    display:block;
}

记住 HTML 有实际的 <button>元素，这可能更适合您的预期目的