<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

3 способа вертикального выравнивания блока по центру

3 способа вертикального выравнивания блока по центру

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


3 способа вертикального выравнивание блока по центру.

При верстке макетов, верстальщик первым делом столкнется с темой центрирования элементов на странице. И если с горизонтальным выравниванием мы уже разобрались в этой статье, то сейчас рассмотрим все актуальные способы вертикального выравнивания.

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

<div class="block"></div>

html,
body {
    width: 100%;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background: violet;
}

1) Свойство position (древний метод)

Если мы блок размещаем относительно браузера, то такое позиционирование называется абсолютным. Кажется логичным, что для вертикального центрирования будет достаточно поставить свойство top:50% и на этом все. При таком подходе не учитываются размеры самого блока, в центре окажется только верхняя его граница, а не сам блок.

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

.block {
    ...

    position: absolute;
    left:0;
    right:0;
    margin: 0 auto; /* горизонтальное выравнивание */
    top:calc(50%-50px); /* высота блока известна */
}


3 способа вертикального выравнивание блока по центру.

Вычисление через функцию calc работает когда известна высота блока. Но что делать, если высота неизвестна - внутри блока будет текст. Нам поможет свойство transform со значением translate, которое по оси Y сместит блок наполовину своей высоты. -50%. По оси X все останется как есть, если указать нулевое значение.

.block {
    width: 120px;
    position: absolute;
    left:0;
    right:0;
    margin: 0 auto; /* горизонтальное выравнивание */
    top:50%;
    transform:translate(0, -50%); /* высота блока неизвестна */
}

2) Свойство flexbox (самый используемый метод)

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

<div class="block-flex">
<p>text</p>
</div>

.block-flex {
    width: 100px;
    height: 100%;
    background: violet;
    color: #fff;
    display: flex;
    justify-content:center;
    align-items:center;
}


3 способа вертикального выравнивание блока по центру.

Как быть в случае, когда блок имеет конкретную высоту (120 пикселей), а текст должен находится в центре блока? Нужно применить связку flexbox + position.

.block-flex {
    width: 120px;
    height: 120px;
    background: violet;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 50px);
    left:0;
    right:0;
    margin: 0 auto;
}


3 способа вертикального выравнивание блока по центру.

3) Свойство grid (современный метод)

Еще один современный способ выравнивания - это grid, который в целом похож на flexbox способ с неизвестной высотой. При верстке макетов, вы чаще всего будете верстать блоки с неизвестной высотой.

<div class="block-grid">
<p>text</p>
</div>

.block-grid {
    width: 120px;
    height: 100%;
    background: violet;
    color: #fff;
    display: grid;
    justify-items:center;
    align-items:center;
}

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

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

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

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