Html выравнивание блочного элемента

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.

В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Бонус

Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.

Источник

Выравнивание по центру блока внутри блока

На этом уроке, вы узнаете несколько способов выравнивания по центру блока внутри блока по вертикали и горизонтали. В качестве блоков могут быть любые фигуры.

В нашем примере, мы будем центрировать картинку (блочный элемент) внутри прямоугольника. Для демонстрации выравнивания по центру несколькими способами, мы создадим три прямоугольника, с картинками внутри.

Конечный результат, независимо от способа, будет выглядеть так:

Общие стили для всех способов:

Зададим позицию блока относительной по отношению к окну браузера. Это в дальнейшем даст возможность блоку-дочке задать абсолютное позиционирование уже к блоку-родителю.

.block width: 250px;
height: 300px;
background-color: red;
position: relative;

Исходные размеры картинки-иконки такие же, как и ширина красного прямоугольника, уменьшим её максимальные размеры.

.icon max-width: 60%;
max-height: 60%;
>

HTML-разметка у всех способов одинаковая, отличаться будут только стили.

Способ первый

Положение изображения автоматически определяет сам браузер с помощью свойства margin: auto.

.first position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: auto;
>

Способ второй

Этот способ выравнивания по центру никогда еще не подводил. Вы спросите, зачем нужно последнее свойство transform? Если убрать transform, то иконка не будет стоять точно по центру, поскольку не учитываются её собственные размеры. Центр иконки не совпадает с центром блока-родителя. Мы двигаем иконку назад и вниз на половину её собственного размера.

.second position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
>

Способ третий

Отличается от двух предыдущих тем, что класс flex задан блоку div, а не картинке.

.flex display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
>

А что будет, если после тега img, всем трем блокам добавить текст?

Ольга Смирнова

Консультант по кредитам

У первых двух способов, параграфы с текстом окажутся наверху, несмотря на то, что в HTML-коде, они стоят после изображения. Для перемещения текста под картинку, потребуется обернуть теги img, h2 и p в ещё один блок div и прописать ему свойство text-align: center.

Однако с третьим способом выравнивания на флексах, не возникает таких проблем, конструкция не нуждается в дополнительном оберточном блоке. Параграфы с текстом встают точно посередине и после изображения и там где надо.

Заключение

Лишний раз можно убедиться в продвинутости и удобстве верстки на флексах. Советую всем тем верстальщикам, кто еще не верстает на флексах, наконец-то начать использовать флексы. Оправдание, почему вы не верстаете на флексах, может быть только одно – экзотическое желание заказчика, угодить пользователям «древних» браузеров. В остальных же случаях, нет ни одной причины почему не нужно верстать на флексах.

Если вы не знаете с чего начать уже зарабатывать свои первые деньги, то лучшим вариантом будет — научиться верстать лендинги, с помощью этого видеокурса «О создании лендинга под ключ».

Создано 20.02.2019 10:00:20

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник