## Bootstrap 캐러셀 캡션을 수직 및 왼쪽으로 배치하는 방법은 무엇입니까?

Bootstrap 캐러셀 캡션을 수직 및 왼쪽으로 배치하는 방법

Bootstraps의 캐러셀 캡션은 캐러셀 내에서 자동으로 수평 중앙에 위치하도록 설계되었습니다. 슬라이드. 그러나 원하는 세로 정렬을 얻으려면 약간의 조정이 필요할 수 있습니다.

캡션을 세로로 가운데에 맞추기

캡션을 세로로 가운데에 맞추려면 번역Y와 함께 변환 속성을 활용하세요. 기능. .carousel-caption CSS에 다음 스타일을 추가합니다.

<code class="css">top: 50%;
transform: translateY(-50%);</code>

캡션을 컨테이너 상단에 고정한 다음 수직으로 50% 오프셋하여 중앙 위치에 놓습니다.

과다 하단 공간 제거

Bootstrap의 기본 스타일은 캡션 아래에 추가 공간을 추가합니다. 이를 제거하려면 .carousel-caption CSS에 다음을 추가하세요:

<code class="css">bottom: initial;</code>

흐릿한 요소 방지

변환 스타일을 지원하지 않는 브라우저의 경우, 상위 요소 .item에 다음 스타일을 추가하는 것이 좋습니다.

<code class="css">-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;</code>

이렇게 하면 분수 픽셀 위치 지정을 사용할 때 Safari 및 Mobile Safari에서 요소가 흐릿해지는 것을 방지할 수 있습니다.

예

<code class="css">.carousel-caption {
  color: black;
  right: 58%;
  text-align: center;
  max-width: 500px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}</code>

이러한 수정 사항을 적용하면 캐러셀 캡션이 수직 중앙에 배치되고 다양한 화면 크기에서도 시각적으로 안정적인 상태를 유지하게 됩니다.

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