Cara memusatkan imej secara menegak dalam div

secara menegak memusatkan imej dalam div bootstrap: panduan komprehensif

Artikel ini menangani pelbagai aspek imej yang berpusat secara menegak dalam bootstrap divs, meneroka teknik yang berbeza dan kecekapannya. Pada Flexbox. Bootstrap 4 dan 5 mudah menyokong Flexbox, menjadikannya penyelesaian yang bersih dan cekap. Inilah caranya:

Sapukan Flexbox ke Div induk:

Tambah kelas

dan
1. ke Div anda. membolehkan susun atur Flexbox, dan secara menegak memusatkan item dalam bekas Flex. Jika imej anda tidak mempunyai ketinggian tetap (mis., Ia ditetapkan kepada d-flex), ia mungkin tidak berpusat dengan betul. Pertimbangkan menetapkan ketinggian tertentu atau menggunakan teknik nisbah aspek (dibincangkan kemudian). Kelas align-items-center, d-flex, dan align-items-center memastikan kedua -dua pusat menegak dan mendatar imej dalam ruang itu. Ingat untuk menggantikan
dengan laluan sebenar ke imej anda.
2. Bagaimana saya boleh mengelakkan limpahan imej apabila secara menegak memusatkannya dalam div bootstrap? Untuk mengelakkan ini, anda perlu mengawal saiz imej. Berikut adalah beberapa pendekatan: auto
set
3. dan : ini mengehadkan saiz imej sambil mengekalkan nisbah aspeknya. Campurkan ini dengan kaedah Flexbox di atas: justify-content-center

Gunakan

:

<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image">
</div>

harta CSS ini mengawal bagaimana imej saiznya sesuai dengan bekasnya.

akan skala imej agar sesuai di dalam bekas sambil mengekalkan nisbah aspeknya, yang berpotensi menambah kotak surat (ruang kosong). d-flex akan skala imej untuk menutup sepenuhnya bekas, berpotensi menanam bahagian imej. Div, dan yang paling berkesan?

1. Flexbox (disyorkan): seperti yang terperinci di atas, ini bersih, ringkas, dan disokong secara meluas. Walau bagaimanapun, Flexbox sering lebih mudah untuk tugas khusus ini. Ini kurang cekap dan memerlukan lebih banyak pengiraan manual daripada Flexbox. Ia juga memerlukan ketinggian dan lebar tertentu untuk bekas induk. JavaScript?
2. Ya, kaedah Flexbox yang diterangkan di atas adalah penyelesaian CSS tulen. Ia tidak memerlukan apa -apa javascript. Menggunakan untuk mengendalikan limpahan juga merupakan pendekatan CSS tulen. Oleh itu, anda boleh mencapai pusat imej menegak dalam Bootstrap Divs dengan cekap dan tanpa menggunakan JavaScript.

Atas ialah kandungan terperinci Cara memusatkan imej secara menegak dalam div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!