Почему блок не встает посередине страницы css

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

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

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

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

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

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

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

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

.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, всем трем блокам добавить текст?

<img src="https://myrusakov.ru/support.png" alt="">
<h2>Ольга Смирнова</h2>
<p>Консультант по кредитам</p>

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

Она выглядит вот так:

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

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

Почему блок не выравнивается по центру?

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css css3 или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать DIV по центру страницы?

Как сделать?

Как выровнять блок DIV по центру страницы, отцентрировать по горизонтали, сделать это с помощью разных css свойств, все это мы рассмотрим с вами сегодня.

Выровнять div по центру страницы

Для выравнивание блока DIV по центру страницы, проще всего воспользоватся абсолютным или фиксированным позиционированием и отталкиваться от границ страницы сайта.
Вот как это выглядит в коде:

Мы создали свойства для блока DIV с классом centered, прописали фиксированную позицию, задали значения ширины и высоты, и отступили от верхнее и левой границы сайта по 50%, в результате мы почти получили желаемое:

div по центру страницы

div по центру страницы

Наш блок DIV выровнялся по середине страницы, но относительно своего левого верхнего угла, соответственно нам необходимо сдвинуть наш div на 50% вверх и влево относительно своей ширины и высоты.
Сделаем мы это с помощью отрицательных значений свойства margin:

т.к. у нашего блока фиксированный размер width: 200px; height:100px;, то 50% от ширины и высоты мы легко посчитали и получили: margin: -50px 0 0 -100px;

Теперь результат нашей работы нас устраивает:

div по центру страницы

div по центру страницы

Выровнять блок DIV по центру страницы не зная его размеров

В случае если мы не знаем ширину и высоту нашего блока, то вместо margin, можно воспользоваться transform: translate(-50%, -50%);, свойство transform: translate(-50%, -50%); смещает наш блок относительно его размеров и тем самым решает нашу задачу &#128578;

Выровнять div по горизонтали

Зачастую выровнять блок DIV по центру относительно горизонтали, применяется для выравнивания самого сайта по центру окна браузера.
Сделать это очень просто, посмотрите сами:

Все выравнивание блока DIV wrapper, осуществляется с помощью свойства margin:0 auto;, главное чтобы значение ширины было меньше чем у родительского блока &#128578;

Отцентрировать блок по горизонтали

Отцентрировать блок по горизонтали

Демо пример выравнивания блока DIV по горизонтали, относительно краев окна браузера.

Если у вас остались вопросы или в этом посте не описана ваша ситуация по выравниванию блока DIV. Пишите все в комментариях к посту, обязательно вам отвечу и помогу &#128578;

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *