Cara Menengahkan Gambar Menggunakan Text Align: Center

Pemrograman

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-alignproperti 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-alignpropertinya.

   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-fitmenspesifikasikan 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-positionproperti untuk mendapatkan lebih banyak kontrol tentang bagaimana media ditampilkan.

Pada dasarnya kami menggunakan object-fitproperti 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: serupa containtetapi sering memangkas konten.
  • none: tampilkan gambar dalam ukuran aslinya.
  • scale-down: bandingkan perbedaan antara nonedan containuntuk mencari ukuran benda beton terkecil.

Kompatibilitas Browser

Ini object-fitdidukung 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