Bagaimana untuk Menegak Tengah dan Menjajarkan Kiri Kapsyen Karusel Bootstrap?

DDD
Lepaskan: 2024-10-30 09:33:27
asal
422 orang telah melayarinya

How to Vertically Center and Left-Align a Bootstrap Carousel Caption?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!