cara membuat gambar di tengah css

Daftar Isi:

Langkah 1: Membuat HTML
Langkah 2: Menambahkan CSS
Penjelasan Kode

Mungkin kamu pernah bertanya-tanya bagaimana cara membuat gambar berada tepat di tengah halaman web dengan menggunakan CSS? Mungkin itu terlihat rumit, tapi percayalah, sebenarnya cukup mudah. Yuk, kita pelajari bersama!

Langkah 1: Membuat HTML

Pertama-tama, kamu harus memiliki elemen HTML untuk diberi gaya. Untuk contoh ini, kita akan menggunakan elemen img. Buat file HTML baru dan tambahkan kode berikut:

<html>
    <body>
        <img id="gambarTengah" src="gambar.jpg">
    </body>
</html>

Pastikan bahwa kamu telah mengganti "gambar.jpg" dengan path tepat dari gambar yang ingin kamu letakkan di tengah. Untuk tutorial ini, kita akan menggunakan id gambarTengah untuk mengidentifikasi gambar ini dalam file CSS nanti.

Langkah 2: Menambahkan CSS

Setelah kamu memiliki file HTML, saatnya untuk menambahkan beberapa CSS. CSS akan kita gunakan untuk mengubah posisi elemen gambar. Tambahkan tag <style> dalam tag <head> di file HTMLmu dan beri kode berikut:

<html>
    <head>
        <style>
            #gambarTengah {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <img id="gambarTengah" src="gambar.jpg">
    </body>
</html>

Dengan cara ini, gambar akan selalu berada di tengah halaman, bahkan jika kamu merubah ukuran jendela browser.

Penjelasan Kode

Position: Absolute

Dengan menggunakan position: absolute, elemen tersebut akan ditempatkan secara relatif terhadap elemen terdekat dengan position: relative atau position: absolute. Jika tidak ada, elemen tersebut akan diletakan secara relatif terhadap body HTML.

Top: 50% dan Left: 50%

Menetapkan top: 50% dan left: 50% membuat titik awal elemen (pojok kiri atas) berada di tengah halaman.

Transform: Translate(-50%, -50%)

Fungsi translate(-50%, -50%) akan memindahkan gambar kembali setengah dari lebar dan tingginya, yang akhirnya membuat gambar tampak terpusat.

Semoga dengan tutorial ini, kamu dapat memahami cara untuk membuat gambar berada di tengah halaman menggunakan CSS. Selamat mencoba!

CARA MEMBUAT GAMBAR DI TENGAH CSS

Artikel ini akan membantu kamu dalam memahami cara untuk membuat gambar berada di tengah halaman menggunakan CSS. Pelajari langkah-langkah sederhana dan mudah dipahami berikut ini.