Центрирование следующих и предыдущих кнопок внизу моей HTML-страницы

Question

Я хочу центрировать мои кнопки next и previous .Прямо сейчас они находятся в крайней левой части страницы.Код был взят из 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

Вы также можете использовать этот код:

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

Answer 2

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

используйте это !!

Answer 3

@ Азазель: Попробуйте этот код Надеюсь, он работает!если вам нужно, это должен быть единственный центр, тогда просто добавьте эти свойства, но вам нужно, чтобы он был 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

Используйте этот код, это поможет вам ..

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 5

Если вам нужно, чтобы кнопки прилегали к нижней части, а также были централизованы, то сначала добавьте эти 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 6

Я бы сделал nextPreviousButton гибким контейнером и сделал бы следующее:

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