Bootstrap Gambar Tips Centering: Gunakan sistem grid untuk berpusat secara mendatar: Justify-content-center class ke pusat secara mendatar, Col-Auto membolehkan gambar untuk menyesuaikan diri seperti yang diperlukan, dan IMG-fluid menyesuaikan diri dengan saiz kontena. Gunakan Flexbox untuk berpusat secara menegak: D-Flex menetapkan bekas ke bekas Flex, Align-items: pusat secara menegak. Cuba gunakan kelas Bootstrap sendiri, ikuti garis panduan kod ringkas, elakkan gaya tersuai, bersarang yang berlebihan, dan tingkatkan kebolehbacaan dan kecekapan kod.

Gambar bootstrap berpusat: keseimbangan antara keanggunan dan kecekapan

Gambar bootstrap berpusat, yang kedengarannya mudah, tetapi ia benar -benar menjadi muslihat untuk menjadi mudah dan cekap. Ramai pemula akan jatuh ke dalam keadaan bersarang dan kod yang berlebihan. Malah, kehalusan terletak pada pemahaman tentang mekanisme kerangka bootstrap itu sendiri dan aplikasi fleksibel pemilih CSS.

Tujuan artikel ini sangat mudah: membantu anda dengan cepat menguasai kemahiran memusatkan gambar bootstrap, menulis kod bersih dan kemas, dan elakkan masalah yang tidak perlu. Selepas membaca artikel ini, anda akan memahami beberapa kaedah berpusat yang berbeza, mengetahui prinsip -prinsip di belakangnya, dan dapat memilih penyelesaian yang paling sesuai berdasarkan keadaan sebenar. Anda tidak akan lagi bermasalah dengan memusatkan gambar, tetapi akan dapat mengendalikan pelbagai masalah susun atur dengan anggun.

Mari kita mulakan dengan asas -asas. Inti bootstrap adalah sistem grid, yang menganjurkan elemen halaman berdasarkan container , row , dan col . Sebaik sahaja anda memahami ini, ia menjadi lebih mudah untuk memusatkan gambar. Di samping itu, anda perlu mengenali sifat-sifat text-align , margin dan display CSS, yang merupakan alat utama untuk mencapai pusat imej.

Mari pergi terus ke topik: Pusat gambar. Kaedah yang paling biasa ialah menggunakan sistem grid Bootstrap. Katakan anda ingin memusatkan imej secara mendatar dan masukkannya ke dalam bekas:

 <code class="html"><div class="container"> <div class="row justify-content-center"> <div class="col-auto"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="My Image"> </div> </div> </div></code>

Kelas justify-content-center membenarkan unsur-unsur dalaman berpusat secara mendatar. col-auto membolehkan gambar mengambil ruang yang diperlukan, mengelakkan peregangan yang tidak perlu. img-fluid membolehkan imej untuk responsif menyesuaikan diri dengan saiz kontena. Ini adalah penyelesaian yang sangat mudah dan cekap, dan disyorkan untuk menggunakannya terlebih dahulu.

Tetapi bagaimana jika gambar anda perlu berpusat secara menegak? Sistem grid tidak dapat menyelesaikan masalah pusat menegak secara langsung. Pada masa ini, anda boleh menggunakan Flexbox. Tetapkan bekas induk ke bekas flex, dan kemudian gunakan align-items: center; ke pusat menegak:

 <code class="html"><div class="container d-flex justify-content-center align-items-center" style="height: 300px;"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="My Image"> </div></code>

Di sini, d-flex menetapkan bekas sebagai bekas Flex, align-items: center melaksanakan pusat menegak, justify-content-center mengekalkan pusat mendatar. height: 300px; Tetapkan ketinggian kontena, yang merupakan prasyarat untuk pusat menegak. Ingat, Flexbox adalah alat yang berkuasa, tetapi anda perlu memahami ciri -cirinya untuk menjadi fleksibel. Tetapan yang tidak sesuai boleh menyebabkan hasil yang tidak dijangka.

Sudah tentu, terdapat kaedah lain, seperti menggunakan kedudukan mutlak dan nilai margin negatif, tetapi ini biasanya rumit, dan kod itu kurang dibaca dan terdedah kepada kesilapan. Saya tidak mengesyorkan kaedah ini melainkan ia benar -benar diperlukan.

Akhirnya, mengenai pengoptimuman prestasi. Cuba gunakan kelas yang datang dengan bootstrap untuk mengelakkan menyesuaikan sejumlah besar gaya CSS. Ini bukan sahaja meningkatkan kebolehbacaan kod, tetapi juga mengurangkan jumlah kod dan meningkatkan kelajuan pemuatan halaman. Ingat, kod ringkas sering bermakna kecekapan yang lebih tinggi. Elakkan penggunaan bersarang dan mengekalkan struktur kod yang jelas, yang penting untuk penyelenggaraan dan pelanjutan kod. Kod yang baik adalah seperti karya seni yang dibuat dengan teliti, mudah dan elegan.

Atas ialah kandungan terperinci Cara menyimpan kod mudah di tengah gambar bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!