Как выровнять кнопки css

Чтобы выровнять кнопки в CSS, можно использовать свойство text-align, чтобы выровнять текст кнопки внутри контейнера.

1. Центрирование:

.container {
  text-align: center;
}

.button {
  display: inline-block;
}

В этом примере мы задаем выравнивание для контейнера кнопки как центрование. Затем мы указываем display: inline-block, чтобы установить кнопку в качестве блочного элемента, который будет выровнен по центру.

Этот же подход можно использовать для горизонтального выравнивания кнопок с помощью других значений text-align, например left и right.

.container {
  text-align: right;
}

.button {
  display: inline-block;
}

2. Выравнивание по левому краю:

.container {
  display: flex;
  justify-content: flex-start;
}

.button {
  margin-right: 1rem; /* Отступ между кнопками */
}

С этим способом мы используем свойство display: flex для контейнера и задаем его justify-content как flex-start, чтобы выровнять кнопки по левому краю. Затем мы добавляем margin-right для каждой кнопки, чтобы создать отступ между ними.

3. Выравнивание по правому краю:

.container {
  display: flex;
  justify-content: flex-end;
}

.button {
  margin-left: 1rem; /* Отступ между кнопками */
}

Этот способ аналогичен предыдущему, но мы используем justify-content для контейнера, чтобы выравнять кнопки по правому краю, и добавляем margin-left для каждой кнопки, чтобы создать отступ между ними.

Это лишь некоторые из способов выравнивания кнопок CSS, их можно комбинировать для достижения нужного результата.