Выравнивание элементов по вертикали и горизонтали

Введение

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

Skills Graph

Центрирование с использованием преобразований

В ВМ уже предоставлены файлы index.html и style.css.

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

1. Установите свойство position родительского элемента в relative, а дочернего элемента в absolute, чтобы позиционировать его относительно своего родителя.
2. Используйте left: 50% и top: 50%, чтобы сдвинуть дочерний элемент на 50% от левого и верхнего края родительского элемента.
3. Используйте transform: translate(-50%, -50%), чтобы отменить его позицию, чтобы он был выровнен по вертикали и горизонтали.
4. Обратите внимание, что фиксированные height и width родительского элемента используются только в целях демонстрации.

Вот пример HTML-кода:

<div class="parent">
  <div class="child">Centered content</div>
</div>

А вот соответствующий CSS-код:

.parent {
  border: 1px solid #9c27b0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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