반응형 화면에서 Bootstrap 캐러셀 캡션을 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap 캐러셀 캡션의 세로 중심 맞추기

많은 사용자가 Bootstrap에서 캐러셀 캡션을 가로로 배치하려는 노력에도 불구하고 세로로 정렬하는 데 어려움을 겪고 있습니다. 이 문제는 화면 크기가 변경됨에 따라 캡션이 잘못 정렬될 때 자주 발생합니다. 다음은 이 문제를 해결하기 위한 포괄적인 솔루션입니다.

세로 정렬을 위한 CSS 변환

Internet Explorer 9를 포함하여 CSS의 TranslateY 기능에 대한 브라우저 지원이 널리 퍼져 있습니다. 이 기능을 사용하면 다음이 가능합니다. y축을 따라 요소를 이동하여 수직 정렬합니다. .carousel-caption CSS에 다음 줄을 추가하세요.

top: 50%;
transform: translateY(-50%);

캡션의 기본 상단 속성은 0으로 설정되어 있지만, 이를 50%로 설정하고 50%의 음수 변환Y를 적용하면 캡션을 중앙에 배치할 수 있습니다. caption을 원래 상단 위치에서 50% 아래로 내립니다.

추가 하단 공간 제거

기본 Bootstrap CSS로 인해 발생하는 추가 하단 공간을 제거하려면 다음 줄을 .carousel-caption CSS:

bottom: initial;

이 줄은 하단 속성을 초기 상태로 재설정하여 과도한 공간을 제거합니다.

픽셀 흐림 수정

요소를 반픽셀에 배치하면 흐릿하게 나타날 수 있습니다. 이를 방지하려면 다음 CSS를 상위 요소(이 경우 .item)에 적용하세요.

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

이 설정은 브라우저가 요소를 렌더링하는 방식을 개선하여 선명도를 보장합니다.

결과

이러한 CSS 변경 사항을 구현하면 캐러셀 캡션이 수직 중앙에 배치되고 다양한 화면 크기에서 선명하게 표시됩니다.

수정된 HTML 및 CSS 스니펫

<code class="html"><!-- Start JumboCarousel -->
<div id="jumboCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators hidden-xs">
        <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#jumboCarousel" data-slide-to="1"></li>
        <li data-target="#jumboCarousel" data-slide-to="2"></li>
        <li data-target="#jumboCarousel" data-slide-to="3"></li>
    </ol><!-- end carousel-indicators -->

    <!-- Wrapper for Slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" id="slide1">
            <a href="#"><img src="http://placehold.it/1920x720&amp;text=Slide+1" alt="Slide 1"></a>
            <div class="carousel-caption">
                <h1>Check Out this Moose</h1>
                <p class="lead">This text is super engaging and makes you want to click the button.</p>
                <a href="#" class="btn btn-lg btn-primary">Learn More</a>
            </div><!-- end carousel-caption -->
        </div><!-- end slide1 -->
        <div class="item" id="slide2">
            <img src="http://placehold.it/1920x720&amp;text=Slide+2" alt="Slide 2">
            <div class="carousel-caption"></code>

위 내용은 반응형 화면에서 Bootstrap 캐러셀 캡션을 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!