Cara Memusatkan Gambar Secara Vertikal dan Horizontal dengan CSS

Banyak pengembang kesulitan saat mengerjakan gambar. Menangani ketanggapan dan penjajaran sangat sulit, terutama dengan menempatkan gambar di tengah-tengah halaman.

Jadi dalam posting ini, saya akan menunjukkan beberapa cara paling umum untuk memusatkan gambar baik secara vertikal maupun horizontal menggunakan properti CSS yang berbeda.

Saya telah membahas properti Posisi CSS dan Tampilan di posting saya sebelumnya. Jika Anda tidak terbiasa dengan properti tersebut, saya sarankan untuk memeriksa posting tersebut sebelum membaca artikel ini.

Berikut versi videonya jika Anda ingin memeriksanya:

Memusatkan Gambar Secara Horizontal

Mari kita mulai dengan memusatkan gambar secara horizontal dengan menggunakan 3 properti CSS yang berbeda.

Text-Align

Cara pertama untuk memusatkan gambar secara horizontal menggunakan text-alignproperti. Namun, metode ini hanya berfungsi jika gambar berada di dalam penampung level blok seperti :

 div { text-align: center; } 

Margin: Otomatis

Cara lain untuk memusatkan gambar adalah dengan menggunakan margin: autoproperti (untuk margin kiri dan kanan).

Namun, menggunakan margin: autosaja tidak akan berfungsi untuk gambar. Jika Anda perlu menggunakan margin: auto, ada 2 properti tambahan yang harus Anda gunakan juga.

Properti margin-otomatis tidak memiliki efek apa pun pada elemen tingkat sebaris. Karena tag adalah elemen sebaris, kita perlu mengubahnya menjadi elemen tingkat blok terlebih dahulu:

img { margin: auto; display: block; }

Kedua, kita juga perlu mendefinisikan lebar. Jadi margin kiri dan kanan dapat mengambil sisa ruang kosong dan menyelaraskan otomatis sendiri, yang melakukan triknya (kecuali jika kita memberikan lebar 100%):

img { width: 60%; margin: auto; display: block; }

Tampilan: Flex

Cara ketiga untuk memusatkan gambar secara horizontal adalah dengan menggunakan display: flex. Sama seperti kami menggunakan text-alignproperti untuk wadah, kami juga menggunakan display: flexuntuk wadah.

Namun, menggunakan display: flexsaja tidak akan cukup. Penampung juga harus memiliki properti tambahan yang disebut justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

The justify-contentproperti bekerja sama dengan display: flex, yang dapat kita gunakan ke tengah gambar horizontal.

Terakhir, lebar gambar harus lebih kecil dari lebar container, jika tidak, ini membutuhkan 100% ruang dan kemudian kita tidak bisa memusatkannya.

Penting: The display: flexproperti tidak didukung dalam versi browser. Lihat di sini untuk lebih jelasnya.

Memusatkan Gambar Secara Vertikal

Tampilan: Flex

Untuk perataan vertikal, penggunaan display: flexsekali lagi sangat membantu.

Pertimbangkan kasus di mana penampung kami memiliki tinggi 800px, tetapi tinggi gambar hanya 500px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Sekarang, dalam kasus ini, menambahkan satu baris kode ke wadah align-items: center,, melakukan triknya:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

The align-itemsproperti kaleng elemen posisi vertikal jika digunakan bersama-sama dengan display: flex.

Posisi: Properti Mutlak & Transformasi

Metode lain untuk perataan vertikal adalah dengan menggunakan properti positiondan transformbersama-sama. Yang ini agak rumit, jadi mari kita lakukan langkah demi langkah.

Langkah 1: Tentukan Posisi Mutlak

Pertama, kami mengubah perilaku pemosisian gambar dari staticmenjadi absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Juga, itu harus berada di dalam wadah yang diposisikan secara relatif, jadi kami menambahkan position: relativeke div wadahnya.

Langkah 2: Tentukan Properti Atas & Kiri

Kedua, kami menentukan properti atas dan kiri untuk gambar, dan mengaturnya menjadi 50%. Ini akan memindahkan titik awal (kiri atas) gambar ke tengah wadah:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Langkah 3: Tentukan Properti Transformasi

Namun langkah kedua telah memindahkan sebagian gambar ke luar wadahnya. Jadi kita perlu membawanya kembali ke dalam.

Mendefinisikan transformproperti dan menambahkan -50% ke sumbu X dan Y-nya melakukan trik:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Ada cara lain untuk memusatkan berbagai hal secara horizontal dan vertikal, tetapi saya telah menjelaskan yang paling umum. Saya harap posting ini membantu Anda memahami bagaimana menyelaraskan gambar Anda di tengah halaman.

Jika Anda ingin mempelajari lebih lanjut tentang Pengembangan Web, silakan kunjungi Saluran Youtube saya untuk lebih lanjut.

Terima kasih telah membaca!