Сегодня разберем 3 основных способа выравнивания блоков по ширине с помощью CSS .
Сегодня разберем 3 основных способа выравнивания блоков по ширине с помощью CSS.
1. Выравнивание блоков на flexbox
На данный момент способ выравнивания блоков по ширине на флексах, самый простой, элегантный и имеет хорошую поддержку у браузеров. Чтобы решить нашу задачу, достаточно flex-контейнеру прописать всего два свойства: display: flex и justify-content: center.
// HTML разметка
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
// CSS стили
.flex-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.flex-item {
width: 100px;
height: 100px;
border: 2px solid salmon;
background-color: pink;
margin-left: 20px;
}
2. Выравнивание на inline-block
Свойство заданное контейнеру text-align: center, поставит все блоки по центру. Свойство display: inline-block, удерживает блоки в одном ряду. Этот способ можно использовать при верстке блоков преимуществ, карточек членов команды. Одним словом - все отдельно стоящие блоки на странице.
// HTML разметка
<div class="inline-container">
<div class="inline-item"></div>
<div class="inline-item"></div>
<div class="inline-item"></div>
<div class="inline-item"></div>
</div>
// CSS стили
.inline-container {
text-align: center; /* выравнивание по центру */
margin-bottom: 20px; /* отступ снизу */
}
.inline-item {
display: inline-block; /* отобразить элементы в строку */
border: 2px solid salmon; /* рамка у блока */
background-color: pink; /* цвет блока */
width: 100px; /* ширина блока */
height: 100px; /* высота блока */
margin-left: 20px; /* промежутки между блоками */
}
3. Выравнивание на float
При выравнивании блоков на флоатах, элементы один за другим извлекаются из потока и сдвигаются влево (float: left), пока не закончится место в ряду. Тем, кому не хватило места, спускаются на следующую строчку. До появления флексбоксов, флоаты были единственным адекватным способом выравнивания по горизонтали.
// HTML разметка
<div class="float-container">
<div class="float-item"></div>
<div class="float-item"></div>
<div class="float-item"></div>
<div class="float-item"></div>
</div>
// CSS стили
.float-container {
margin-bottom: 20px; /* отступ снизу */
}
.float-item {
float: left;
border: 2px solid salmon;
background-color: pink;
width: 100px;
height: 100px;
margin-left: 22px; /* отбить блоки друг от друга */
}
В заключении хочу сказать, что самый актуальный способ выравнивания блоков на флексбоксах. И это неудивительно, ведь технология flexbox позволяет гибко управлять элементами на странице, без всяких костыльных методов. Выравнивание на флоатах - давно устаревший способ. Но стоит о нем знать, чтобы не растеряться, если потребуется вносить правки в старом проекте.
