Bagaimana untuk Memusatkan Imej dengan Sempurna pada Halaman Menggunakan Kelas .center-block Bootstrap?

Menjajarkan Imej Dengan Sempurna di Tengah Halaman Menggunakan Bootstrap

Apabila bekerja dengan Twitter Bootstrap, memusatkan imej secara mendatar mungkin tidak selalunya mudah. Artikel ini membentangkan penyelesaian menggunakan kelas Bootstrap, .center-block, untuk menjajarkan imej mati tengah dengan halaman dengan mudah.

Memahami Kelas .center-block

Kelas .center-block dalam Twitter Bootstrap v3.0.3 direka khusus untuk menjajarkan elemen blok di tengah halaman. Ia menetapkan sifat paparan untuk menyekat dan melaraskan jidar (margin-kiri dan jidar-kanan) kepada automatik, memastikan elemen dipusatkan secara mendatar dan menegak.

Menjajarkan Imej menggunakan .center-block

Untuk memusatkan imej menggunakan .center-block, cuma tambah kelas pada teg img dalam satu baris. Contohnya:

<code class="html"><div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div></code>

Helaian gaya kelas .center-block mentakrifkan perkara berikut:

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

Contoh

Untuk demonstrasi langsung, anda boleh melawati yang berikut halaman contoh:

[Halaman Contoh](URL)

Dengan menggunakan kelas .center-block, anda boleh dengan mudah menjajarkan mana-mana bahagian tengah mati imej dengan halaman, memastikan reka letak yang menarik dan seimbang dari segi visual .

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej dengan Sempurna pada Halaman Menggunakan Kelas .center-block Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!