Выравнивание по центру блока внутри блока
На этом уроке, вы узнаете несколько способов выравнивания по центру блока внутри блока по вертикали и горизонтали. В качестве блоков могут быть любые фигуры.
В нашем примере, мы будем центрировать картинку (блочный элемент) внутри прямоугольника. Для демонстрации выравнивания по центру несколькими способами, мы создадим три прямоугольника, с картинками внутри.
Конечный результат, независимо от способа, будет выглядеть так:
Общие стили для всех способов:
Зададим позицию блока относительной по отношению к окну браузера. Это в дальнейшем даст возможность блоку-дочке задать абсолютное позиционирование уже к блоку-родителю.
.block {
width: 250px;
height: 300px;
background-color: red;
position: relative;
Исходные размеры картинки-иконки такие же, как и ширина красного прямоугольника, уменьшим её максимальные размеры.
.icon {
max-width: 60%;
max-height: 60%;
}
HTML-разметка у всех способов одинаковая, отличаться будут только стили.
Способ первый
<div class="block">
<img class="icon first" src="support.png" alt="">
</div>
Положение изображения автоматически определяет сам браузер с помощью свойства margin: auto.
.first {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: auto;
}
Способ второй
<div class="block">
<img class="icon second" src="support.png" alt="">
</div>
Этот способ выравнивания по центру никогда еще не подводил. Вы спросите, зачем нужно последнее свойство transform? Если убрать transform, то иконка не будет стоять точно по центру, поскольку не учитываются её собственные размеры. Центр иконки не совпадает с центром блока-родителя. Мы двигаем иконку назад и вниз на половину её собственного размера.
.second {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
Способ третий
Отличается от двух предыдущих тем, что класс flex задан блоку div, а не картинке.
<div class="block flex">
<img class="icon" src="support.png" alt="">
</div>
.flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
А что будет, если после тега img, всем трем блокам добавить текст?
<img class="icon" src="support.png" alt="">
<h2>Ольга Смирнова</h2>
<p>Консультант по кредитам</p>
У первых двух способов, параграфы с текстом окажутся наверху, несмотря на то, что в HTML-коде, они стоят после изображения. Для перемещения текста под картинку, потребуется обернуть теги img, h2 и p в ещё один блок div и прописать ему свойство text-align: center.
Однако с третьим способом выравнивания на флексах, не возникает таких проблем, конструкция не нуждается в дополнительном оберточном блоке. Параграфы с текстом встают точно посередине и после изображения и там где надо.
Заключение
Лишний раз можно убедиться в продвинутости и удобстве верстки на флексах. Советую всем тем верстальщикам, кто еще не верстает на флексах, наконец-то начать использовать флексы. Оправдание, почему вы не верстаете на флексах, может быть только одно – экзотическое желание заказчика, угодить пользователям "древних" браузеров. В остальных же случаях, нет ни одной причины почему не нужно верстать на флексах.
Если вы не знаете с чего начать уже зарабатывать свои первые деньги, то лучшим вариантом будет - научиться верстать лендинги, с помощью этого видеокурса "О создании лендинга под ключ".
-
Создано 20.02.2019 10:00:20
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.