Bagaimana untuk Memusatkan Imej dengan Sempurna dalam Bootstrap Menggunakan .center-block?

Menjajarkan Imej Sempurna ke Tengah dengan Bootstrap

Apabila menggunakan rangka kerja Bootstrap, memusatkan imej secara mendatar boleh menjadi sedikit cabaran. Walau bagaimanapun, terdapat penyelesaian mudah menggunakan kelas terbina dalam .center-block.

Kelas CSS: .center-block

Kelas .center-block, diperkenalkan dalam Twitter Bootstrap v3.0.3, memusatkan blok kandungan secara mendatar menggunakan margin. Ia boleh digunakan sebagai mixin atau kelas.

Penggunaan

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

<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>

CSS

Kelas .center-block mempunyai sifat CSS berikut:

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

Sifat ini menetapkan imej untuk dipaparkan sebagai elemen blok dan tengahkannya pada halaman dengan menggunakan jidar yang sama pada kedua-dua belah pihak.

Contoh

Anda boleh melihat contoh langsung imej berpusat menggunakan .center- sekat di: [contoh URL di sini]

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