Question

我的页面上有按钮的中心问题。

HTML的代码

.banner {
  background-color: #101723;
  width: 100%;
  padding: 50px 0;
}

.button {
  display: inline-block;
  width: 20%;
  margin: auto;
  padding: 16px 0;
  text-transform: uppercase;
  vertical-align: middle;
  border: 3px solid #FFFFFF;
  color: #FFFFFF;	
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

<section class="banner">
  <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
  <a href="" target="_blank"><div class="button">BUTTON 2</div></a>
  <a href="" target="_blank"><div class="button">BUTTON 3</div></a>
</section>

3个按钮应位于容器中心。我尝试了一切，但似乎我错过了一些东西。

Answer 1

只需将if (msg === prefix + 'LEADERBOARD') { sql.get(`SELECT username,money FROM userData ORDER BY username`).then(rows => { message.channel.send(rows); }) }添加到UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): DiscordAPIError: Cannot send an empty message.课程：

text-align: center

.banner

Answer 2

CSS中心一直很难实现。我发现了我认为最好的flexbox方法。

.container {
     display: flex;
     flex-direction: column;
     align-items: center; /* To center vertically */
     justify-content: center; /* To center horizontally */
}
.item {
}

您可以在此处找到所需内容：https://www.w3schools.com/css/css3_flexbox.asp

HTML CSS中心按钮

2 个答案: