Cara memusatkan pelbagai gambar secara menegak

Bootstrap tidak secara langsung menyediakan komponen berpusatkan pelbagai vertikal. Ia boleh dilaksanakan dengan bijak menggunakan susun atur Flex: Tetapkan arah flex: flex-column (arah menegak), membenarkan-kandungan-pusat (pusat menegak), lien-item-center (pusat mendatar). Bekas perlu menetapkan ketinggian untuk memastikan imej dipaparkan di tengah. Jika ketinggian imej berbeza, cuba lien-kandungan: pusat untuk menyesuaikan jarak menegak. Sesuai menggunakan atribut nisbah aspek untuk mengawal nisbah aspek gambar dan mengoptimumkan susun atur.

Biarkan gambar anda berpusat dengan anggun secara menegak: Petua Bootstrap

Bagaimana untuk memusatkan pelbagai imej secara menegak dalam bootstrap? Masalah ini kelihatan mudah, tetapi ia tidak ditangani dengan baik dan mudah jatuh ke dalam pelbagai perangkap. Ramai orang baru akan menggunakan text-align: center secara langsung, dan mereka mendapati bahawa gambar itu berpusat secara mendatar, tetapi arah menegak masih kemas. Artikel ini akan meneroka isu ini secara mendalam, membantu anda menguasai kemahiran menegak pelbagai imej di bawah bootstrap, dan berkongsi beberapa pengalaman saya yang meringkaskan selama bertahun -tahun. Selepas membaca artikel ini, anda tidak akan lagi bimbang tentang pusat menegak gambar, dan anda juga boleh belajar daripadanya dan menyelesaikan masalah susun atur.

Pertama sekali, kita perlu jelas: Bootstrap sendiri tidak secara langsung menyediakan komponen atau harta yang "berpusat menegak pelbagai graf". Kita perlu menggunakan alat dan teknologi sedia ada dengan bijak untuk mencapai matlamat ini. Ia seperti membina sebuah istana dengan blok bangunan, Bootstrap menyediakan pelbagai blok bangunan, dan kita perlu menggabungkannya dengan munasabah.

Mari kita semak asas bootstrap yang berkaitan. display: flex adalah alat yang berkuasa yang memberikan unsur keupayaan susun atur yang kuat. Adalah penting untuk memahami tiga sifat flex-direction , align-items dan justify-content . Mereka mengawal arah gelendong, penjajaran paksi silang dan penjajaran spindle unsur-unsur dalam bekas Flex.

Sekarang, mari kita lihat cara menggunakan flex untuk mencapai pusat menegak pelbagai graf. Penyelesaian yang paling mudah adalah menggunakan bekas flex untuk membungkus semua gambar:

 <code class="html"><div class="container d-flex flex-column justify-content-center align-items-center" style="height: 300px;"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image1.jpg" alt="Image 1"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image2.jpg" alt="Image 2"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image3.jpg" alt="Image 3"> </div></code>

Di sini, d-flex membolehkan susun atur flex, flex-column menetapkan arah gelendong menjadi menegak, justify-content-center memusatkan gambar dalam arah menegak, dan align-items-center gambar ke arah mendatar. Kelas img-fluid membolehkan imej untuk menyesuaikan diri secara automatik dengan lebar kontena dan mengekalkan perkadaran. height: 300px; Tetapkan ketinggian kontena untuk memastikan terdapat ruang yang cukup untuk imej yang akan dipusatkan. Ingat, menetapkan ketinggian kontena adalah kunci, jika tidak, imej tidak akan berpusat.

Ini adalah penyelesaian yang mudah dan berkesan, tetapi ia juga mempunyai batasan. Jika bilangan gambar besar atau ketinggian gambar berbeza, kesan penyelesaian ini mungkin tidak sesuai. Pada masa ini, anda mungkin perlu mempertimbangkan penyelesaian susun atur yang lebih kompleks, seperti menggunakan sistem grid atau teknik susun atur flex yang lebih maju.

Seterusnya, mari kita bincangkan beberapa masalah dan penyelesaian yang berpotensi. Sebagai contoh, jika imej tidak konsisten tinggi, align-items: center mungkin tidak mencapai kesan yang diingini. Pada ketika ini, anda boleh cuba menggunakan align-content: center , tetapi ini akan menjejaskan jarak menegak imej. Anda perlu membuat penyesuaian mengikut keadaan sebenar. Di samping itu, atribut aspect-ratio imej juga dapat membantu anda mengawal nisbah aspek imej, dengan itu mengawal susun atur.

Akhirnya, mengenai pengoptimuman prestasi, cuba untuk mengelakkan kod bersarang yang tidak perlu dan berlebihan. Memilih format dan saiz imej yang sesuai juga boleh meningkatkan kelajuan pemuatan halaman. Ingat, kod bersih bukan sahaja mudah untuk dikekalkan, tetapi juga melakukan yang lebih baik. Pengaturcara yang baik sentiasa mengejar keanggunan dan kecekapan kod. Ini bukan hanya teknologi, ia juga merupakan seni. Saya harap artikel ini dapat membantu anda memahami dengan lebih baik imej menegak dalam bootstrap dan meningkatkan keupayaan pembangunan front-end anda.

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