Bootstrap 캐러셀 캡션을 수직으로 가운데 정렬하고 왼쪽 정렬하는 방법은 무엇입니까?

Bootstrap 캐러셀 캡션 위치 지정: 수직 중앙 및 왼쪽 정렬

Bootstrap 캐러셀 캡션을 수직 중앙에 배치하고 약간 왼쪽에 배치하려면 CSS 속성을 구현할 수 있습니다.

CSS 솔루션

CSS 내에 다음 스타일을 추가해야 합니다.

<code class="css">.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}</code>

설명

• top: 50%;: 캡션을 중앙에 수직으로 배치합니다.
• transform:translateY(-50%);: 캡션을 높이의 절반만큼 위로 이동하여 수직 중앙에 배치합니다.
• 하단: 초기;: 캐러셀 캡션에 적용된 기본 하단 패딩을 제거합니다.
• transform-style: Preserve-3d;: 절반 픽셀에 배치된 요소의 흐림을 방지합니다.

사용 이러한 CSS 조정을 통해 캐러셀 캡션은 수직 중앙에 유지되고 약간 왼쪽으로 정렬되어 화면 크기에 관계없이 일관된 위치를 보장합니다.

위 내용은 Bootstrap 캐러셀 캡션을 수직으로 가운데 정렬하고 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!