Cara Memusatkan Gambar Menggunakan Penjajaran Teks: Pusat

Pengaturcaraan

Satu elemen adalah elemen sebaris (nilai paparan inline-block). Ia dapat dipusatkan dengan mudah dengan menambahkan text-align: center;harta CSS ke elemen induk yang mengandunginya.

Untuk memusatkan imej menggunakan text-align: center;anda mesti meletakkan bahagian dalam elemen tahap blok seperti a div. Oleh kerana text-alignharta itu hanya berlaku untuk elemen tahap blok, anda meletakkan text-align: center;elemen tahap blok untuk mencapai pusat yang mendatar .

Contohnya

   Center an Image using text align center  .img-container { text-align: center; }

Catatan: Elemen induk mestilah elemen blok. Sekiranya bukan elemen blok, anda harus menambahkandisplay: block;harta CSS bersama dengantext-alignharta itu.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demo: Codepen

Sesuai Objek

Setelah gambar anda berpusat, anda mungkin mahu mengubah saiznya. Yang object-fitdinyatakan oleh harta bagaimana elemen respon dengan lebar / ketinggian kotak ibubapa itu ini.

Properti ini dapat digunakan untuk gambar, video, atau media lain. Ia juga dapat digunakan dengan object-positionproperti untuk mendapatkan lebih banyak kawalan tentang bagaimana media ditampilkan.

Pada asasnya kami menggunakan object-fitharta tanah untuk menentukan bagaimana ia meregangkan atau melekatkan media sebaris.

Sintaks

.element

Nilai

  • fill: Ini adalah nilai lalai . Ubah saiz kandungan agar sesuai dengan kotak induknya tanpa mengira nisbah aspek.
  • contain: Ubah saiz kandungan untuk mengisi kotak induknya menggunakan nisbah aspek-aspek yang betul.
  • cover: sama seperti containtetapi sering memotong kandungan.
  • none: paparkan gambar dalam ukuran asalnya.
  • scale-down: membandingkan perbezaan antara nonedan containuntuk mencari ukuran objek konkrit terkecil.

Keserasian Penyemak Imbas

Ini object-fitdisokong oleh sebilangan besar penyemak imbas moden, untuk mendapatkan maklumat terkini mengenai keserasian, anda boleh melihatnya //caniuse.com/#search=object-fit.

Dokumentasi

  • text-align - MDN
  • sesuai dengan objek - MDN
  • - MDN