Question

我想将我的下一个和上一个按钮居中。现在，它们当前位于页面的最左侧。代码是从w3schools上获取的，我现在只是在抓挠我的头，以至于如何将这当当的东西居中！这就是我现在所拥有的。我目前很喜欢圆形图标，所以这就是我选择的。

我将它们放在一个div中，希望它可以将上一个和下一个图标都居中，但目前没有运气。运行代码片段，您将了解我在说什么，并且可以看到图标不在中心。

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
}

Answer 2

如果您需要将按钮固定在底部并集中放置，请首先将这些CSS添加到div中，以覆盖您的内容

.nextPreviousButtons{
width:100%;
text-align:center;
position:absolute;
bottom:0;
}

.cover {
position:fixed;
width:100%;
height:100%;
}

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

Answer 3

@Azazel：尝试使用此代码，希望它能起作用！如果需要，它应该是唯一的中心，则只需添加这些属性，但您需要将其设置为center.justify-content：将其水平居中对齐，其中align-items：center垂直居中对齐。

.nextPreviousButtons {
display: flex;
justify-content: center;
align-items: center;

}

或者如果您希望它在底部居中，则使用此代码

.nextPreviousButtons {
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
 }

Answer 4

.nextPreviousButtons{
width:100%;
text-align:center;
position:absolute;
bottom:0;
}

使用它！

Answer 5

使用此代码，将为您提供帮助。

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%;
}
.nextPreviousButtons {
  text-align: center;
}

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

Answer 6

您也可以使用以下代码：

div.nextPreviousButtons {
    margin: 0;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

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

6 个答案: