Display Table 로 수직 및 수평 가운데 정렬 배우기

소개

이 랩에서는 display: table을 사용하여 부모 요소 내에서 자식 요소를 가운데 정렬하는 방법을 배웁니다. 이 기술을 사용하면 복잡한 위치 지정이나 JavaScript 를 사용하지 않고도 수직 및 수평 가운데 정렬을 쉽게 달성할 수 있습니다. 이는 웹사이트 및 애플리케이션의 반응형 레이아웃을 설계할 때 유용한 기술입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

Display Table 가운데 정렬

index.html 및 style.css는 이미 VM 에 제공되었습니다.

자식 요소를 부모 요소 내에서 수직 및 수평으로 모두 가운데 정렬하려면 다음 단계를 따르세요.

고정된 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 에서 자식 요소에 다음 스타일을 적용합니다.

.center 요소가 <table> 요소처럼 동작하도록 display: table을 사용합니다.
요소가 부모 요소 내에서 사용 가능한 공간을 채우도록 height 및 width를 100%로 설정합니다.
자식 요소가 <td> 요소처럼 동작하도록 자식 요소에 display: table-cell을 사용합니다.
자식 요소를 수평 및 수직으로 가운데 정렬하기 위해 자식 요소에 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 Centering 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.