Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Imej dengan Sempurna dalam Bootstrap Menggunakan .center-block?

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

Susan Sarandon
Lepaskan: 2024-10-27 10:02:03
asal
1070 orang telah melayarinya

How to Perfectly Center an Image in Bootstrap Using .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>
Salin selepas log masuk

CSS

Kelas .center-block mempunyai sifat CSS berikut:

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

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan