Sebuah
elemen elemen inline (nilai tampilan inline-block
). Ini dapat dengan mudah dipusatkan dengan menambahkan text-align: center;
properti CSS ke elemen induk yang memuatnya.
Untuk memusatkan gambar menggunakan text-align: center;
Anda harus menempatkan bagian
dalam elemen tingkat blok seperti div
. Karena text-align
properti hanya berlaku untuk elemen tingkat blok, Anda menempatkan text-align: center;
pada elemen tingkat blok pembungkusan untuk mencapai pusat horizontal
.
Contoh
Center an Image using text align center .img-container { text-align: center; }
Catatan: Elemen induk harus merupakan elemen blok. Jika ini bukan elemen blok, Anda harus menambahkandisplay: block;
properti CSS bersama dengantext-align
propertinya.
Center an Image using text align center .img-container { text-align: center; display: block; }
Demo: Codepen
Object Fit
Setelah gambar Anda berada di tengah, Anda mungkin ingin mengubah ukurannya. The object-fit
menspesifikasikan properti bagaimana elemen merespon dengan lebar / tinggi dari itu kotak orangtua.
Properti ini dapat digunakan untuk gambar, video, atau media lainnya. Ini juga dapat digunakan dengan object-position
properti untuk mendapatkan lebih banyak kontrol tentang bagaimana media ditampilkan.
Pada dasarnya kami menggunakan object-fit
properti untuk menentukan bagaimana meregangkan atau menekan media inline.
Sintaksis
.element
Nilai
fill
: Ini adalah nilai default . Ubah ukuran konten agar sesuai dengan kotak induknya terlepas dari rasio aspeknya.contain
: Mengubah ukuran konten untuk mengisi kotak induknya menggunakan rasio aspek yang benar.cover
: serupacontain
tetapi sering memangkas konten.none
: tampilkan gambar dalam ukuran aslinya.scale-down
: bandingkan perbedaan antaranone
dancontain
untuk mencari ukuran benda beton terkecil.
Kompatibilitas Browser
Ini object-fit
didukung oleh sebagian besar browser modern, untuk info terbaru tentang kompatibilitas, Anda dapat memeriksa //caniuse.com/#search=object-fit ini.
Dokumentasi
- text-align - MDN
- object-fit - MDN
- MDN