用CSS对齐按钮

Question

所以基本上我一直在尝试在我的网站上居中对齐两个按钮，实际上没有一个常见的方法工作。无论发生什么，它都不会移动，也没有其他东西覆盖它。我可能错过了什么，但这是如此令人头痛。

我的CSS按钮代码:

.btn {
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
.btn-primary {
background-color: #346cfc !important
}
.btn-secondary {
background-color: #346cfc !important;
} 

我的HTML代码:

</nav>
<div class="heading">
<h1 class="display-5 title"></i>Ricky</h1>
<p class="subtitle">Ricky is a multi purpose bot with features like Music, Economy, Utility, and more!<br />Check out the <a href="https://docs.partywumpus.com">docs</a> or get started below.</p>
<a class="btn btn-primary btn-lg text-center"href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center"href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
<br /><br /><br /><br /><br /><br />

我确实找到了一些工作，使位置相对工作。但是它在移动设备上看起来很糟糕这取决于我将顶部和左侧的%设置为

.btn-primary {
position: relative;
top: 50%;
left: 50%;
background-color: #7289DA !important
} 

除了让它在PC或手机上看起来很糟糕之外，还有什么更好的方法吗?

Answer 1

你应该把你的按钮包装成div

<div class="wrapper">
<a class="btn btn-primary btn-lg text-center"href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center"href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
</div>
.wrapper {
display: "flex";
align-items: "center";
}

https://css-tricks.com/almanac/properties/a/align-items/