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

Для выравнивания кнопок по вертикали относительно друг друга в HTML можно использовать различные методы. Рассмотрим несколько из них:

1. **Flexbox**:
Flexbox - это мощный инструмент для создания гибких макетов веб-страниц. Для выравнивания элементов по вертикали можно использовать следующий CSS-код:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Где .container - это контейнер, в котором находятся кнопки. Свойство display: flex; задает контейнеру возможность использовать flexbox. flex-direction: column; определяет направление главной оси контейнера как вертикальное. align-items: center; центрирует элементы по вертикали внутри контейнера.

2. **Grid**:
CSS Grid Layout позволяет создавать более сложные макеты, чем Flexbox. Для выравнивания по вертикали можно использовать следующий CSS-код:

.container {
    display: grid;
    align-items: center;
}

Где .container - это контейнер, в котором находятся кнопки. Свойство display: grid; позволяет превратить контейнер в сетку. align-items: center; центрирует элементы по вертикали внутри контейнера.

3. **Выравнивание по вертикали с помощью таблиц**:

<table>
  <tr>
    <td style="vertical-align: middle;">
      <button>Кнопка 1</button>
    </td>
  </tr>
  <tr>
    <td style="vertical-align: middle;">
      <button>Кнопка 2</button>
    </td>
  </tr>
</table>

Где style="vertical-align: middle;" позволяет выровнять элемент по центру вертикали относительно родительского элемента таблицы.

Используя один из этих методов вы сможете легко выровнять кнопки по вертикали относительно друг друга в HTML.