Блоки внутри блока по центру css

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

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

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

Читайте также:  Epson xp 800 сброс памперса

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

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

Заключение

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

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

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

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

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

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

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

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

Читайте также:  Браузеры с поддержкой unity web player 2018

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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

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

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

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

    Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

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

    1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

    Браузеры, которые поддерживают данное решение:

    • Chrome 4.0+
    • Firefox 3.6+
    • Internet Explorer 9+
    • Opera 10.5+
    • Safari 3.1+

    2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    CSS — Выравнивание по горизонтали

    1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 6.0+
    • Opera 3.5+
    • Safari 1.0+

    2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+
    Читайте также:  Linux mint lmde 3 обзор

    CSS — Выравнивание по вертикали

    1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

    2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 8.0+
    • Opera 7.5+
    • Safari 1.0+

    Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

    Привет. Нужно выравнить блок по центру родительского блока(один div вложен в другой), используя только CSS. Вне зависимости от того как мы указываем размеры блоков(проценты, пиксели, пункты или ещё что). Всё что нашёл в интернете не работает(смотрел в FF 6 и последнем Сhrome).

    4 ответа 4

    У вас схожие проблемы. И советую, прежде чем задать вопрос — сначала посмотрите уже существующие темы на интересующую Вас тему.

    Да сделайте вы margin: 0 auto; выровняете по горизонтали. Задав "относительную" ширину блока, скажем 20% от высоты, вы сможете этот margin изменить на margin: 40% auto; и будет вас счастье!

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками вёрстка html или задайте свой вопрос.

    Связанные

    Похожие

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

    Ссылка на основную публикацию
    Adblock detector