Выравнивание по ширине элементов может быть выполнено несколькими способами в 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%.
