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-align
harta 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-align
harta 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-fit
dinyatakan 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-position
properti untuk mendapatkan lebih banyak kawalan tentang bagaimana media ditampilkan.
Pada asasnya kami menggunakan object-fit
harta 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 seperticontain
tetapi sering memotong kandungan.none
: paparkan gambar dalam ukuran asalnya.scale-down
: membandingkan perbezaan antaranone
dancontain
untuk mencari ukuran objek konkrit terkecil.
Keserasian Penyemak Imbas
Ini object-fit
disokong 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