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

使用以下选项，div中的按钮应具有文本对齐：水平居中到中心按钮

getName()

代码参考 - https://codepen.io/nagasai/pen/OQeLjJ

选项2：

为避免使用其他类，请在登陆页按钮类

上使用CSS

.btnCenter{
  text-align: center;
}

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

代码参考 - https://codepen.io/nagasai/pen/paXJeN

Answer 2

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

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

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

CSS按钮不会水平居中

2 个答案: