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

Bootstrap의 점보트론 내 컨테이너의 수직 정렬

Bootstrap의 점보트론 내 컨테이너의 수직 정렬은 수준에 따라 다양한 접근 방식을 통해 달성할 수 있습니다. 원하는 브라우저 지원.

현대적인 방식

사용 Flexbox

Flexbox를 지원하는 최신 브라우저의 경우 보다 간단하고 일관된 접근 방식은 Flexbox 레이아웃 모델을 사용하는 것입니다. 페이지에 다음 CSS를 추가하면

.vertical-center {
  display: flex;
  align-items: center;
}

Jumbotron 내에서 컨테이너를 세로 중앙에 쉽게 수직으로 배치할 수 있습니다. 클래스가 ".vertical-center"인 div로 컨테이너를 둘러싸야 합니다.

구식 방식

이전 브라우저의 경우

Flexbox 지원이 부족한 브라우저의 경우 , 수직 정렬과 관련된 웹 표준 기술에는 좀 더 많은 노력이 필요합니다. text-align: center 속성을 활용하여 상위 요소 내에서 하위 요소를 수평으로 정렬합니다. 처음에 디스플레이에 의해 숨겨진 div 요소를 만듭니다. 높이가 상위 요소와 같거나 작은 요소는 없습니다. 이제 원하는 요소(예: 컨테이너)에서 수직 정렬을 사용하여 정렬을 조작합니다.

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

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

컨테이너 내에 디스플레이를 추가합니다: inline-block; 수직 정렬과 함께 속성: 중간; 수직 센터링을 달성합니다. 여기에는 Flexbox의 효과를 모방하기 위한 추가 마크업이 포함됩니다.

브라우저 고려 사항

Internet Explorer 8 및 9는 인라인 블록 기술을 올바르게 해석하지 못하므로 대체 솔루션이 필요하다는 점을 기억하세요.

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