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

Выравнивание по ширине элементов может быть выполнено несколькими способами в CSS. Рассмотрим наиболее распространенные из них.

С помощью свойства display: flex

Вы можете использовать свойство display со значением flex для создания контейнера-флекса и выравнивания его дочерних элементов.

HTML:

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  text-align: center;
}

В данном примере мы создаем контейнер-флекс с помощью свойства display и значение flex. Затем мы используем свойство justify-content для установки выравнивания элементов по ширине. Значение space-between распределяет элементы равномерно по контейнеру с равными промежутками между элементами.

Мы также устанавливаем свойство flex для дочерних элементов с значением 1, что означает, что все элементы будут иметь одинаковую ширину внутри контейнера-флекса. Дополнительно мы устанавливаем свойство text-align для элементов, чтобы центрировать текст.

С помощью свойства display: table

Вы можете использовать свойство display со значением table для создания таблицы, а затем использовать свойство width для установки ширины ячеек таблицы.

HTML:

<div class="table">
  <div class="row">
    <div class="cell">Элемент 1</div>
    <div class="cell">Элемент 2</div>
    <div class="cell">Элемент 3</div>
  </div>
</div>

CSS:

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  text-align: center;
  width: 33%;
}

В данном примере мы создаем таблицу с помощью свойства display и значение table. Затем мы используем свойство table-layout со значением fixed для установки фиксированной ширины ячеек таблицы.

Мы также задаем ширину контейнера таблицы с помощью свойства width равной 100%, чтобы таблица занимала всю доступную ширину родительского элемента.

Дочерние элементы задаются с помощью элементов div и устанавливаются с помощью свойств display со значением table-row для строк таблицы, и table-cell для ячеек таблицы. Чтобы выровнять текст по центру, мы устанавливаем свойство text-align со значением center для ячеек таблицы. Поскольку в таблице три элемента, мы устанавливаем ширину ячеек равной 33%.