Bagaimana untuk Memusatkan Kapsyen Karusel Bootstrap secara Menegak pada Skrin Responsif?

Mencapai Pemusatan Menegak Kapsyen Karusel Bootstrap

Ramai pengguna menghadapi kesukaran untuk menjajarkan kapsyen karusel secara menegak dalam Bootstrap, walaupun terdapat usaha untuk meletakkannya secara mendatar. Isu ini sering timbul apabila kapsyen menjadi tidak sejajar apabila saiz skrin berubah. Berikut ialah penyelesaian komprehensif untuk menyelesaikan masalah ini.

Transformasi CSS untuk Penjajaran Menegak

Sokongan penyemak imbas untuk fungsi translateY CSS meluas, termasuk Internet Explorer 9. Fungsi ini membolehkan penjajaran menegak dengan menterjemah elemen sepanjang paksi-y. Tambahkan baris berikut pada CSS .carousel-caption anda:

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

Sifat teratas lalai kapsyen ditetapkan kepada 0, tetapi dengan menetapkannya kepada 50% dan menggunakan terjemahan negatif sebanyak 50%, anda memusatkan kapsyen turun 50% daripada kedudukan teratas asal.

Menghapuskan Ruang Bawah Tambahan

Untuk mengalih keluar ruang bawah tambahan yang disebabkan oleh CSS Bootstrap lalai, masukkan baris berikut dalam anda .carousel-caption CSS:

bottom: initial;

Barisan ini menetapkan semula sifat bawah kepada keadaan asalnya, dengan itu menghapuskan lebihan ruang.

Membetulkan Pixel Blur

Jika elemen diletakkan pada setengah piksel, ia mungkin kelihatan kabur. Untuk mengelakkan ini, gunakan CSS berikut pada elemen induk, dalam kes ini, .item:

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

Tetapan ini memperbaik cara pelayar memaparkan elemen, memastikan ketajaman.

Keputusan

Melaksanakan perubahan CSS ini akan memusatkan kapsyen karusel anda secara menegak dan menjadikannya kelihatan tajam pada pelbagai saiz skrin.

Snippet HTML dan CSS yang disemak

<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>

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kapsyen Karusel Bootstrap secara Menegak pada Skrin Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!