Cara Membuat Imej Pusat Secara Horizontally Di Div

Cara Pusat Imej di Div Bootstrap: Pilihan Terbaik: Gunakan Flexbox (tambah kelas D-Flex dan Justify-Content-Center) untuk projek-projek lama: Gunakan Text-Align (tetapkan tag IMG ke blok inline; dan tambahkan teks-align: pusat;)

Jadikan gambar stabil di Div Bootstrap: Rahsia untuk Berpusat secara mendatar

Ramai pelajar menghadapi masalah ini: gambar tidak boleh berpusat di Div of Bootstrap, dan ia berasa tidak selesa untuk menontonnya. Malah, penyelesaiannya tidak begitu rumit. Kuncinya adalah untuk memahami mekanisme susun atur bootstrap dan beberapa tips CSS. Artikel ini akan membawa anda untuk menyelesaikan langkah demi langkah, membolehkan anda menyingkirkan masalah gambar yang berpusat, dan laluan kod akan sangat lancar dari sekarang. Selepas membaca, anda akan menguasai pelbagai kaedah dan dapat memilih penyelesaian yang optimum mengikut keadaan sebenar.

Mari kita semak semula asas -asas bootstrap. Bootstrap menggunakan sistem flexbox dan grid untuk susun atur, yang kedua -duanya dapat dengan mudah berpusat. Flexbox lebih fleksibel dan sesuai untuk pelbagai senario, manakala sistem grid lebih sesuai untuk susun atur halaman kompleks.

Mari kita mulakan dengan Flexbox yang paling biasa digunakan. Untuk menjadikan pusat imej secara mendatar di Div, anda hanya perlu menambah dua kelas d-flex dan justify-content-center ke Div induk. d-flex membolehkan susun atur Flexbox, justify-content-center menyelaraskan elemen kanak-kanak (iaitu, gambar) secara mendatar.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div></code>

Itu sederhana? Ya, itu mudah! Sudah tentu, anda juga mungkin perlu menetapkan atribut max-width imej untuk mengelakkan imej daripada terlalu besar dan memecahkan bekas.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Ini hanya penggunaan yang paling asas. Jika imej anda tidak ditetapkan ketinggian, anda juga mungkin perlu berpusat secara menegak. Pada masa ini, anda boleh menambah kelas align-items-center . Kelas ini akan memusatkan elemen kanak -kanak ke arah menegak.

 <code class="html"><div class="d-flex justify-content-center align-items-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Sempurna! Sekarang, tidak kira betapa besar atau kecil gambar itu, ia boleh terus berpusat secara mendatar dan menegak di Div.

Walau bagaimanapun, ini bukan satu -satunya cara. Jika projek anda sudah lama atau tidak mahu menggunakan Flexbox untuk sebab tertentu, anda juga boleh menggunakan atribut Teks-Align. Tetapi kaedah ini hanya boleh digunakan untuk elemen dalam talian, jadi tag IMG perlu ditetapkan untuk display: inline-block; .

 <code class="html"><div style="text-align: center;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

Kaedah ini lebih tradisional dan tidak mudah seperti Flexbox ketika berurusan dengan susun atur yang kompleks.

Mari kita bincangkan masalah yang mungkin. Sebagai contoh, nisbah lebar dan ketinggian gambar tidak betul, mengakibatkan kesan berpusat yang tidak memuaskan. Pada masa ini, anda mungkin perlu mengubah saiz imej itu sendiri, atau menggunakan atribut object-fit dengan CSS untuk mengawal paparan imej.

Di samping itu, jika div anda mempunyai padding atau margin, ia juga boleh menjejaskan kesan berpusat. Semak semula gaya CSS anda untuk memastikan tiada gangguan gaya yang tidak perlu.

Singkatnya, terdapat banyak cara untuk memusatkan gambar di Div of Bootstrap. Kaedah yang mana untuk dipilih bergantung pada keperluan khusus dan situasi projek anda. Flexbox adalah cara yang paling disyorkan kerana ia mudah dan cekap, dan mempunyai keserasian yang baik. Walau bagaimanapun, hanya dengan memahami kelebihan dan kekurangan pelbagai kaedah, kita boleh membuat pilihan terbaik dalam pembangunan sebenar. Ingat, kebolehbacaan dan penyelenggaraan kod juga penting, jadi cuba menyimpan kod ringkas dan jelas. Saya harap artikel ini dapat membantu anda dengan mudah menyelesaikan masalah yang berpusat pada gambar, dan saya ingin anda pengaturcaraan yang bahagia!

Atas ialah kandungan terperinci Cara Membuat Imej Pusat Secara Horizontally Di Div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!