Bagaimana untuk memusatkan imej secara menegak dalam Bootstrap?

Cara Memusatkan Imej Secara Menegak dalam Bootstrap

Memusatkan imej secara mendatar dalam Bootstrap boleh dicapai dalam pelbagai cara.

Kaedah 1: Menggunakan Kelas Blok Tengah

Twitter Bootstrap v3.0.3 memperkenalkan kelas blok tengah untuk tujuan ini. Ia menetapkan elemen untuk dipaparkan: menyekat dan memusatkannya melalui jidar.

Untuk menggunakan kaedah ini:

1. Tambahkan blok pusat kelas pada teg img:

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

Kaedah 2: Menggunakan Sistem Grid

Sebagai alternatif, anda boleh menggunakan sistem grid Bootstrap untuk membahagikan baris kepada tiga blok yang sama:

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

Kaedah ini juga akan memusatkan imej secara mendatar dalam baris.

Untuk memusatkan imej secara menegak, anda juga boleh menggunakan CSS untuk menetapkan imej supaya memaparkan blok sebaris dan menyediakannya dengan margin atas yang sama hingga separuh ketinggian imej:

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

Atas ialah kandungan terperinci Bagaimana untuk memusatkan imej secara menegak dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!