<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

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

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

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

// HTML разметка
<div class="wrap">
    <div class="block"></div>
</div>

// CSS код родительского блока
.wrap {
    max-width: 400px;
    margin: 50px auto;
    border: 3px solid black;
    min-height: 100px;
}

// CSS код дочернего блока
.block {
    width: 100px;
    height: 100px;
    margin: 5px;
    background: blueviolet;
}

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


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

Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.


1) Свойство text-align (используется, но реже)

Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.

<div class="wrap center">
    ...
</div>

.center {
    text-align: center;
}

.block {
    ...
    display: inline-block;
}


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

2) Свойство margin: auto (актуальное)

Данное свойство мы прописываем дочернему блоку. В сокращенной записи верхнему и нижнему отступу мы можем оставить нулевое значение или указать нужные размеры согласно макету для верстки. Но нас интересует значение auto, как раз оно и задает автоматический отступ с левой и с правой стороны от вложенного блока. Это значит, что пространство с обеих сторон должно рассчитываться поровну. Этот способ выравнивания и по сей день является самым популярным у верстальщиков при горизонтальном выравнивании.

<div class="wrap">
    <div class="block m-auto"></div>
</div>

.m-auto {
    margin: 0 auto;
}

3) Свойство position: absolute (устаревшее)

Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.

<div class="wrap relative">
    <div class="block absolute"></div>
</div>

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    left: 50%;
    transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
}

4) Свойство flexbox (популярное)

Flexbox - самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.

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

.flexbox {     display: flex;
    justify-content: center;
}

5) Свойство grid (современное)

Еще один современный способ выравнивания - это grid. Добавляем родителю всего два grid свойства, а вложенному блоку - три grid свойства.

<div class="wrap grid-parent">
    <div class="block grid-child"></div>
</div>

.grid-parent {
    display: grid;
    grid-template-areas: "a";
}

.grid-child {
    grid-area: a;
    justify-self: center;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

romas_s romas_s 04.11.2020 18:14:39

Добрый день, бы ло бы интересно почитать статью как выровнять блоки по высоте.

Ответить

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