Все, кто работает и изучают HTML/CSS, всегда сталкиваются с такой проблемой как, вертикальное или горизонтальное выравнивание элемента. Так как google предлагает нам больше количество вариантов решения данного вопроса, я решил, что было бы не плохо, самое популярные варианты собрать в одном месте.
Способ 1
Если вам известна высота родительского элемента, и она фиксированная, то, для вертикального выравнивания вам нужно дочернему элементу присвоить свойство line-height
которое будет равняться высоте родительского элемента. В некоторых случаях это будет полезно, но использовать данный метод я не советую, т.к. если будет разная величина строк, может все испортиться.
Пример данного способа:
Способ 2
Для выравнивания элементов можно использовать top: 50%
/left: 50%
в сочетании с translateX(-50%) translateY(-50%)
для того, чтобы можно было динамически горизонтально/вертикально центрировать элементы.
Пример данного способа:
Способ 3
Предположим, что нам известна высота текста или блока. Все что нам нужно сделать, это всего лишь присвоить дочернему элементу position:absolute
и сверху подвинуть его на 50%, относительно родительского, а также нужно сделать отрицательный отступ от верха, на половину высоты элемента.
Пример данного способа:
Способ 4
Для выравнивания элементов можно присвоить свойство display:flex
и использовать align-items: center
и justify-content: center
для вертикального и горизонтального центрирования.
Пример данного способа:
Способ 5
В некоторых случаях вам будет нужно убедиться, что высота элемента html
/body
равна 100%.
Для вертикального выравнивания присвойте свойствам width
и height
родительского элемента значение 100%
и добавьте display: table
. В дочернем элементе измените значение display
на table-cell
и добавьте vertical-align: middle
.
Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center
, либо margin: 0 auto
, если вы имеете дело с блоковым элементом.
Пример данного способа:
Если вы знаете еще какие-нибудь способы центрирования HTML-элементов или у вас просто остались вопросы, пишите в комментарии.
Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал и соц.сети 😉
Оставьте ответ