HTML CSS 按钮居中：使用 Flexbox 实现两个按钮水平居中显示

使用 Flexbox 实现按钮居中

Flexbox 是一种强大的 CSS 布局模型，可以轻松实现各种布局效果，包括按钮居中。

要使用 Flexbox 将按钮居中，只需将按钮的父元素设置为 flex 容器，然后使用 justify-content: center 属性将按钮水平居中。

代码示例：

<div class='call-to-action'>
    <div style='display: flex; justify-content: center;'>
        <a onclick='callCHATGPT()' class='btn btn-large' href='#' style='background-color: #4cae4c; color: #fff; font-weight: bold; border-radius: 5px; padding: 10px 20px; border: none; box-shadow: none; text-decoration:none; margin-right: 20px;' onmousedown='this.style.backgroundColor='#3c903c'' onmouseup='this.style.backgroundColor='#4cae4c''>回答</a>
        <a onclick='clearTextArea()' class='btn btn-large' href='#' style='background-color: #d9534f; color: #fff; font-weight: bold; border-radius: 5px; padding: 10px 20px; border: none; box-shadow: none; text-decoration:none;' onmousedown='this.style.backgroundColor='#c9302c'' onmouseup='this.style.backgroundColor='#d9534f''>清空</a>
    </div>
</div>

解释：

• display: flex 将父元素设置为 flex 容器。
• justify-content: center 将 flex 容器中的子元素水平居中。

注意：

• 可以使用 align-items: center 属性将按钮垂直居中。
• 可以使用 margin-right 属性调整按钮之间的间距。

总结

通过使用 Flexbox，您可以轻松地将两个按钮水平居中显示。这是一种简单而有效的方法，可以让您的网站设计更加美观。