Как выровнять по вертикали и равномерно распределить две кнопки?

Question

Я пытаюсь выровнять две кнопки по горизонтали и равномерно распределить их по вертикали в окне браузера, как на следующей фотографии:

#buttonArea {
  display: flex;
  flex-direction: column;
}

#addButton {
  margin: auto;
  display: block;
}

#eraseButton {
  margin: auto;
  display: block;
}

<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

Кнопки расположены горизонтально по центру, но я не знаю, как их выровнять по вертикали, чтобы они были равномерно распределены. (например, ADD: 33,33%, ERASE: 66,66%)

Как настроить кнопки, как на моей фотографии?

Answer 1

Вам необходимо добавить position:relative к родительскому элементу div, а затем для кнопок добавить position: absolute; и использовать свойство top: xx %;, чтобы выровнять его по вертикали на 33% и 66% от высоты.

#buttonArea {
  display: flex;
  justify-content: center;
  align-items: center;
  height: -webkit-fill-available;
  width: 100%
  position:relative;
  text-align:centre;
}

#addButton {
  display: block;
  top: 33.33%;
  position:absolute;
}

#eraseButton {
  top: 66.66%;
  position:absolute;
  display: block;
}

<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

Надеюсь, это поможет. Ура! * * 1013

Answer 2

Используйте justify-content: space-around, чтобы распределить равное вертикальное пространство вокруг каждой кнопки, и align-items: center, чтобы выровнять элементы по горизонтали.

Примечание: justify-content относится к главной оси, а align-items - к поперечной оси. Обычно justify-content применяется к оси x, поскольку значение по умолчанию для flex-direction равно row. Однако, поскольку мы использовали flex-direction: column, главная ось теперь является осью Y.

#buttonArea {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  
  width: 100%;
  height: 100vh;
  border: 1px solid black;
}

<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

Answer 3

HTML

<div id="Area">
  <div class="container">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
  </div>
</div>

CSS

#Area {
  width: 100vw;
  height: 100vh;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center
}

addButton, eraseButton{
    width: 50px;
    display: inline-block,
}

Что я делаю, вам нужно установить ширину и высоту страницы, чтобы вы могли устанавливать элементы на месте вы хотите. Затем установим контейнер кнопки на высоту: 100%, потому что вы хотите выровнять горизонтально по центру и равномерно распределить по вертикали.

Следующая самая важная вещь - justify-content: space-around; Поскольку вы используете flex, я надеюсь, что вы знаете это

Answer 4

Использовать положение: относительное и управлять координатами соответственно