## Bagaimana untuk Meletakkan Kapsyen Karusel Bootstrap Secara Menegak dan ke Kiri?

Cara Meletakkan Kapsyen Karusel Bootstrap Secara Menegak dan Ke Kiri

Kapsyen karusel Bootstrap direka bentuk secara automatik memusatkan dirinya secara mendatar dalam karusel slaid. Walau bagaimanapun, ia mungkin memerlukan beberapa pelarasan untuk mencapai penjajaran menegak yang diingini.

Memusatkan Kapsyen Secara Menegak

Untuk memusatkan kapsyen secara menegak, gunakan sifat transformasi bersama-sama dengan terjemahanY fungsi. Tambahkan gaya berikut pada CSS .carousel-caption:

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

Ini menambatkan kapsyen ke bahagian atas bekasnya dan kemudian mengimbanginya secara menegak sebanyak 50% untuk mencapai kedudukan tengah.

Menghapuskan Lebihan Ruang Bawah

Penggayaan lalai Bootstrap menambahkan sedikit ruang tambahan di bawah kapsyen. Untuk mengalih keluar ini, tambahkan yang berikut pada CSS .carousel-caption:

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

Mencegah Elemen Kabur

Untuk penyemak imbas yang tidak menyokong gaya transformasi, adalah disyorkan untuk menambah gaya berikut pada elemen induk .item:

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

Ini menghalang unsur kabur dalam Safari dan Safari Mudah Alih apabila menggunakan kedudukan piksel pecahan.

Contoh

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

Dengan menggunakan pengubahsuaian ini, kapsyen karusel akan dipusatkan secara menegak dan kekal secara visual stabil merentas saiz skrin yang berbeza.

Atas ialah kandungan terperinci ## Bagaimana untuk Meletakkan Kapsyen Karusel Bootstrap Secara Menegak dan ke Kiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!