Bagaimana untuk Menegak Tengah dan Menjajarkan Kiri Kapsyen Karusel Bootstrap?

Letakkan Kapsyen Karusel Bootstrap: Berpusat Menegak dan Jajaran Kiri

Untuk memusatkan kapsyen karusel Bootstrap secara menegak dan meletakkannya sedikit ke kiri, gabungan Sifat CSS boleh dilaksanakan.

Penyelesaian CSS

Dalam CSS, penggayaan berikut harus ditambah:

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

Penjelasan

• atas: 50%;: Letakkan kapsyen secara menegak di tengah.
• transformasi: translateY(-50%);: Mengalihkan kapsyen ke atas separuh daripada ketinggiannya, menghasilkan pemusatan menegak.
• bottom: initial;: Mengalih keluar pelapik bawah lalai yang digunakan pada kapsyen karusel.
• transform-style: preserve-3d;: Mengelakkan kabur pada elemen yang diletakkan pada separuh piksel.

Dengan pelarasan CSS ini, kapsyen karusel akan kekal di tengah menegak dan dijajarkan sedikit ke kiri, memastikan kedudukan yang konsisten tanpa mengira saiz skrin.

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