Flexbox와 기존 방법을 사용하여 부트스트랩에서 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap에서 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap을 사용하여 작업할 때 특히 jumbotron 구성 요소 내에서 수직 정렬이 필요한 경우가 많습니다. 이 기사에서는 유연한 상자와 전통적인 방법을 사용하여 이를 달성하기 위한 두 가지 접근 방식을 살펴봅니다.

유연한 상자 접근 방식

유연한 상자 레이아웃의 출현으로 수직 정렬이 크게 단순화되었습니다. 이 방법은 display: flex 속성과 center로 설정된 align-items 속성을 활용합니다.

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

레거시 브라우저에 대한 전통적인 접근 방식

Internet Explorer 8 및 9 호환성을 위해 전통적인 접근 방식 의사 요소와 인라인 블록 요소를 활용하는 것이 좋습니다. 이 방법에는 전체 높이의 의사 요소를 생성하고, 수직 정렬을 중간으로 설정하고, 의사 요소와 컨테이너 요소의 표시를 모두 인라인 블록으로 설정하는 작업이 포함됩니다.

.vertical-center {
  height: 100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

추가 고려 사항

• 매우 작은 화면에서 수직 정렬 문제를 방지하려면 CSS 미디어를 사용하여 의사 요소의 높이를 자동 또는 0으로 설정할 수 있습니다.
• 바닥글/머리글 섹션이 다른 요소 위에 표시되도록 하려면 적절한 위치 지정과 더 높은 Z-색인 값을 사용하는 것이 좋습니다.

위 내용은 Flexbox와 기존 방법을 사용하여 부트스트랩에서 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!