Изучите вертикальное и горизонтальное выравнивание с использованием display table

Введение

В этом практическом занятии мы узнаем, как выровнять дочерний элемент по центру внутри родительского элемента с использованием display: table. Используя этот метод, мы можем легко добиться вертикального и горизонтального выравнивания без необходимости применять сложную позиционировку или JavaScript. Это полезный навык при проектировании адаптивных макетов для сайтов и приложений.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Центрирование с использованием display: table

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

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

Добавьте элемент-контейнер с фиксированными значениями height и width.

<div class="container"></div>

Добавьте дочерний элемент внутри элемента-контейнера и назначьте ему класс .center.

  <div class="center"><span>Centered content</span></div>
</div>

В CSS примените следующие стили к элементу-контейнеру:

Установите height и width на желаемые фиксированные значения.
Добавьте рамку (по желанию).

.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}

В CSS примените следующие стили к дочернему элементу:

Используйте display: table, чтобы элемент .center начинал себя вести как элемент <table>.
Установите height и width на 100%, чтобы элемент заполнил доступное пространство внутри родительского элемента.
Используйте display: table-cell для дочернего элемента, чтобы он начинал себя вести как элемент <td>.
Используйте text-align: center и vertical-align: middle для дочернего элемента, чтобы выровнять его по центру как вертикально, так и горизонтально.

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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

Резюме

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