html - 在我的 html 页面底部居中放置下一个和上一个按钮

Question

我想将我的下一个 和上一个 按钮居中。现在它们位于页面的最左侧。代码取自 w3schools，我现在正摸不着头脑，想知道如何让这个该死的东西居中!这是我现在所拥有的。我目前喜欢圆形图标，所以这就是我的选择。

我将它们放在一个 div 中，希望它可以将 previous 和 next 图标移动到中心，但目前运气不好。运行代码片段，您会明白我在说什么，您会看到图标没有居中。

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}

<div class="nextPreviousButtons">
  <a href="#" class="previous round">&#8249;</a>
  <a href="about.html" class="next round">&#8250;</a>
</div>

Answer 1

我会让 nextPreviousButton 成为一个 flex 容器并执行以下操作:

.nextPreviousButton {
   display: flex;
   justify-content: center
}