Вертикальное выравнивание css (vertical-align) | Домашнее задание | Академия сайтов
🔥 Вертикальное выравнивание элементов CSS в верстке + домашнее задание
✅ Домашнее задание находится по ссылке ✅
🍀 Задание на 14 урок (документ) - https://bit.ly/40nGhgp
________________________________
❄️ Группа ВК - http://bit.ly/3Qo9m7s
🌴 Группа Facebook - https://bit.ly/43YvFa6
🍃 Yandex Дзен - http://bit.ly/3lypvMV
❇️ Личная страница VK - http://bit.ly/3GP3XAp
💎 Личная страница Instagram - https://bit.ly/3FdYEtK
🍉 Rutube - http://bit.ly/3QXsARK
________________________________
🌴 Принимаю заявки на ваши заказы
🍃 Принимаю заявки на индивидуальное обучение
________________________________
В данном уроке мы изучаем каким образом возможно выравнивать элементы CSS в верстке сайта.
Так же не забываем про 🔥 домашнее задание 🔥
________________________________
💎 Вертикальное выравнивание элементов в CSS может быть достигнуто несколькими способами, в зависимости от контекста и требований дизайна.
✅ 1. Выравнивание по вертикали с помощью display: flex;
С помощью свойства display: flex; можно создать контейнер, который будет выравнивать свои дочерние элементы по вертикали. Для этого необходимо задать свойство align-items: center; для контейнера.
✅ 2. Выравнивание по вертикали с помощью display: table-cell;
Свойство display: table-cell; позволяет создать ячейку таблицы, которая может быть выровнена по вертикали. Для этого необходимо задать свойство vertical-align: middle; для ячейки.
✅ 3. Выравнивание по вертикали с помощью position: absolute;
Свойство position: absolute; позволяет создать абсолютно позиционированный элемент, который может быть выровнен по вертикали. Для этого необходимо задать свойство top: 50%; и свойство transform: translateY(-50%); для элемента.
✅ 4. Выравнивание по вертикали с помощью line-height;
Свойство line-height; позволяет задать высоту строки текста, которая может быть использована для выравнивания элементов по вертикали. Для этого необходимо задать одинаковое значение свойства line-height; для родительского и дочернего элементов, и задать для дочернего элемента свойство display: inline-block;.
✅ Каждый из этих методов имеет свои преимущества и недостатки, и выбор конкретного метода зависит от контекста и требований дизайна.
________________________________
Курс web разработке предназначен для новичков в области веб-программирования, будет полезен как для школьников старших классов и студентов технических специальностей, так и для всех людей, которые интересуются веб-технологиями или планируют начать карьеру в этой индустрии. Полученный уровень подготовки позволит вам начать карьеру HTML-верстальщика, PHP – Разработчика или JavaScript разработчика.
#Academy_site #НиколайКарнаушенко #Верстка #СозданиеСайтов
