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

CSSCSSBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/lists_and_tables("Lists and Tables") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35191{{"Центрирование с использованием display: table"}} css/colors -.-> lab-35191{{"Центрирование с использованием display: table"}} css/text_styling -.-> lab-35191{{"Центрирование с использованием display: table"}} css/borders -.-> lab-35191{{"Центрирование с использованием display: table"}} css/width_and_height -.-> lab-35191{{"Центрирование с использованием display: table"}} css/display_property -.-> lab-35191{{"Центрирование с использованием display: table"}} css/lists_and_tables -.-> lab-35191{{"Центрирование с использованием display: table"}} css/nesting -.-> lab-35191{{"Центрирование с использованием display: table"}} end

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

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

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

  1. Добавьте элемент-контейнер с фиксированными значениями height и width.
<div class="container"></div>
  1. Добавьте дочерний элемент внутри элемента-контейнера и назначьте ему класс .center.
  <div class="center"><span>Centered content</span></div>
</div>
  1. В CSS примените следующие стили к элементу-контейнеру:
  • Установите height и width на желаемые фиксированные значения.
  • Добавьте рамку (по желанию).
.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}
  1. В 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, чтобы улучшить свои навыки.