Cara Memusatkan Gambar Dengan CSS

Ingin memusatkan gambar menggunakan CSS? Masalah keselarasan sering menjadi sumber frustrasi bagi desainer web. Untungnya, memusatkan gambar dengan CSS sangat sederhana, dan kami akan menunjukkan cara menyelesaikannya dalam beberapa langkah.

Seperti banyak tugas desain web, ada lebih dari satu cara untuk menyelesaikannya! Kami akan membahas tiga metode utama dalam artikel ini. Mari kita mulai!

1. Gunakan properti margin

Mengatur batas property adalah salah satu cara termudah untuk memusatkan gambar secara horizontal menggunakan CSS. Margin adalah komponen inti dari model kotak CSS.

Pertama, Anda harus mengubah elemen gambar dari yang sebaris menjadi satu blok. Elemen HTML tingkat blok menempati lebar penuh elemen induknya dan mampu memenuhi seluruh lebar halaman.

Dengan membuat elemen gambar menjadi elemen blok, Anda kemudian dapat memanipulasi posisinya dengan menyesuaikan margin horizontalnya. Anda juga perlu mengatur lebar tertentu untuk gambar, untuk menentukan seberapa banyak ruang yang digunakan gambar di halaman.

Berapa pun lebar yang Anda pilih, gambar harus memiliki margin kiri dan kanan yang sama. Anda dapat mencapai ini dengan mudah dengan memberikan properti margin nilai mobil:

img.center {
 tampilan: blok;
 margin-kiri: otomatis;
 margin-kanan: otomatis;
 lebar: 800 piksel;
}

2. Gunakan Tata Letak Flexbox

Metode ini memerlukan penempatan gambar dalam elemen level blok, biasanya sebagai div:

Setelah Anda selesai melakukannya, Anda dapat menambahkan beberapa properti untuk memanipulasi penampilannya. Anda akan menggunakan dua properti CSS.

Yang pertama adalah menampilkan properti dengan nilainya ditetapkan ke melenturkan. Anda juga bisa gunakan flex untuk menyelaraskan elemen dalam HTML. Properti kedua yang akan Anda tambahkan ke div Anda adalah membenarkan-konten, dengan nilainya disetel ke tengah seperti:

div.center {
 tampilan: fleksibel;
 justify-content: pusat;
}

3. Gunakan Elemen tengah yang tidak digunakan lagi

Praktik terbaik web mendorong Anda untuk menggunakan CSS untuk penataan gaya dan HTML untuk semantik, jadi sebaiknya Anda tidak menggunakan metode HTML ini. Itu tengah tag, yang memusatkan kontennya secara horizontal, tidak digunakan lagi di HTML5.

Namun jika harus, berikut adalah cara memusatkan gambar menggunakan HTML saja. Cukup bungkus gambar tag di tag tengah seperti:

Itulah Cara Menyelaraskan Gambar Anda di HTML

Kami telah menunjukkan kepada Anda tiga metode yang berbeda dan mudah digunakan untuk memusatkan gambar Anda dalam dokumen HTML. Cobalah semuanya dan pilih salah satu yang paling cocok untuk Anda. Hindari metode ketiga kecuali Anda sama sekali tidak punya pilihan!

Satu hal yang perlu diingat adalah bahwa ada beberapa cara lagi untuk memusatkan gambar menggunakan HTML dan CSS. Salah satu metode umum yang berfungsi untuk teks dan gambar sebaris adalah perataan teks Properti.

Cara Menyelaraskan Teks Rata di Halaman Web Anda Dengan CSS

Baca Selanjutnya

Tentang Penulis