Как выровнять элементы по горизонтали CSS

Существует несколько способов выравнивания элементов по горизонтали CSS, вот некоторые из них:

1. Flexbox

Одним из наиболее распространенных сегодня способов выравнивания элементов CSS является использование Flexbox. Применение свойства display:flex к контейнеру элементов позволяет создать гибкий контейнер, который может объединять элементы в ряды или столбцы и контролировать изменение размеров элементов контейнера.

Пример CSS для выравнивания элементов по горизонтали при помощи Flexbox:

.container {
  display: flex;
  justify-content: center; /* горизонтальное выравнивание по центру */
  align-items: center; /* вертикальное выравнивание по центру */
}

2. CSS Grid

CSS Grid — это CSS-модуль, который позволяет создавать сетки из столбцов и строк. Для выравнивания элементов по горизонтали можно использовать свойство justify-content, которое определяет выравнивание по горизонтали.

Пример CSS для выравнивания элементов по горизонтали при помощи CSS Grid:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* создание гибкой сетки */
  justify-content: center; /* горизонтальное выравнивание по центру */
}

3. Text-align

В случае, если вы хотите выровнять текст или inline-элементы по горизонтали, вы можете использовать свойство text-align. Оно позволяет задать выравнивание текста и inline-элементов по центру, влево или вправо.

Пример CSS для выравнивания элементов по горизонтали при помощи text-align:

.container {
  text-align: center; /* горизонтальное выравнивание по центру */
}

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