Konsep apa yang perlu anda fahami ketika memusatkan gambar bootstrap

Bootstrap menyediakan pelbagai kaedah untuk memusatkan imej: Gunakan Teks-Align: Pusat; untuk memusatkan unsur -unsur dalam talian secara mendatar. Gunakan kelas MX-AUTO untuk memusatkan unsur-unsur peringkat blok secara mendatar. Pusat menegak dicapai menggunakan sistem grid atau kotak flex dalam kombinasi dengan penjajaran menegak dan ketinggian kontena.

Gambar bootstrap berpusat, yang nampaknya mudah, tetapi sebenarnya mempunyai misteri tersembunyi. Ramai orang baru akan jatuh ke dalam beberapa lubang dan akhirnya menjadi terharu. Dalam artikel ini, mari kita lihat perkara -perkara di belakang pusat gambar bootstrap, supaya anda dapat memahami sepenuhnya dan tidak lagi diganggu olehnya.

Matlamat artikel ini adalah untuk memberi anda pemahaman yang menyeluruh tentang pelbagai kaedah memusatkan gambar bootstrap dan prinsip -prinsip di belakangnya. Selepas membaca, anda bukan sahaja dapat memusatkan gambar dengan mudah, tetapi juga memahami kelebihan dan kekurangan kaedah yang berbeza, untuk memilih penyelesaian yang paling sesuai.

Untuk memahami pusat gambar bootstrap, anda perlu terlebih dahulu memikirkan beberapa konsep: atribut display , atribut margin , atribut text-align , dan sistem grid yang dilengkapi dengan Bootstrap. Atribut display menentukan kaedah paparan elemen, seperti inline , block , inline-block , dan lain-lain; atribut margin mengawal margin elemen; Atribut text-align mengawal penjajaran teks, tetapi ia juga boleh menjejaskan pusat mendatar unsur-unsur sebaris; Sistem grid Bootstrap menyediakan kaedah susun atur yang mudah.

Mari kita mulakan dengan yang paling mudah dan gunakan text-align: center; untuk mencapai pusat mendatar gambar. Tetapi ini hanya berfungsi untuk unsur-unsur inline atau inline-block . Oleh itu, anda perlu menetapkan harta display imej untuk inline-block terlebih dahulu:

 <code class="html"><img  src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy"   style="max-width:90%" alt="Konsep apa yang perlu anda fahami ketika memusatkan gambar bootstrap" ></code>

Ia kelihatan mudah, bukan? Tetapi kaedah ini mempunyai batasan: ia hanya boleh berpusat secara mendatar, dan secara menegak berpusat dengan cara lain. Selain itu, menulis gaya secara langsung dalam atribut style bukanlah amalan terbaik dan tidak kondusif untuk penyelenggaraan kod.

Cara yang lebih elegan ialah menggunakan kelas Bootstrap. Sebagai contoh, anda boleh menggunakan kelas mx-auto untuk mencapai pusat mendatar:

 <code class="html"><img  class="mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Konsep apa yang perlu anda fahami ketika memusatkan gambar bootstrap" ></code>

Di sini d-block menetapkan sifat display imej untuk block , manakala mx-auto menetapkan margin kiri dan kanan ke auto , dengan itu mencapai pusat mendatar. Ini lebih mudah daripada penyelesaian sebelumnya dan lebih banyak lagi dengan falsafah reka bentuk bootstrap.

Tetapi bagaimana dengan pusat menegak? Ini memerlukan menggunakan sistem grid bootstrap atau flexbox. Dengan sistem grid, anda boleh meletakkan gambar dalam bekas dan kemudian mencapai pusat menegak dengan menetapkan ketinggian bekas dan penjajaran menegak gambar. Ini memerlukan pemahaman tertentu mengenai sistem grid.

Menggunakan Flexbox lebih mudah dan lebih mudah:

 <code class="html"><div style="display: flex; justify-content: center; align-items: center; height: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="centered image"> </div></code>

Di sini, kami menggunakan Flexbox untuk memusatkan kontena secara mendatar dan menegak. height: 200px; Tetapkan ketinggian kontena, yang menentukan kedudukan pusat menegak gambar. Ingat, ketinggian kontena adalah kunci.

Walau bagaimanapun, kaedah ini mempunyai kelebihan dan kekurangan mereka sendiri. Secara langsung menggunakan gaya inline tidak cukup elegan, yang boleh menyebabkan kekeliruan kod; Menggunakan kelas Bootstrap lebih standard, tetapi anda perlu memahami konsep reka bentuk bootstrap; Menggunakan Flexbox adalah fleksibel, tetapi anda perlu memahami mekanisme susun atur Flexbox. Kaedah yang mana untuk dipilih bergantung kepada keperluan khusus dan keadaan projek anda.

Akhirnya, satu nasihat: jangan lupa untuk mempertimbangkan reka bentuk responsif gambar. Kesan paparan gambar di bawah saiz skrin yang berbeza harus konsisten. Anda boleh menggunakan kelas responsif Bootstrap atau pertanyaan media untuk melaksanakannya. Ingat, kod elegan bukan sahaja berfungsi, tetapi juga mudah untuk mengekalkan dan melanjutkan. Memilih kaedah yang paling sesuai dan bukannya kaedah yang paling kompleks adalah makna sebenar pengaturcaraan.

Atas ialah kandungan terperinci Konsep apa yang perlu anda fahami ketika memusatkan gambar bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!