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

Введение

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

Skills Graph

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

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

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

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

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

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

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

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

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

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

4. В 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, чтобы улучшить свои навыки.