Cara Membuat Element Berada Di Tengah Secara Vertikal Dan Horizontal

Hallo teman-teman DUMET School, pada tutorial kali ini kita akan mencoba membuat elemen yang ada di HTML berada di tengah-tengah browser secara vertical dan horizontal hanya menggunakan CSS. Sebenarnya sudah banyak cara untuk membuat elemen berada di tengah-tengah secara vertikal dan horizontal menggunakan CSS, tetapi disini kita akan menggunakan cara terbaru yang disediakan oleh CSS 3. Cara ini sangat mudah sekali, kita akan menggunakan fungsi property CSS 3 yaitu display, align-item, dan justify-content. Baik kita akan coba langsung membuat nya saja ya teman-teman.

Pertama kalian bisa buat satu file HTML dengan nama index.html, kemudian kalian bisa buat baris program HTML nya seperti gambar di bawah ini.

Kemudian CSS nya kalian bisa ikuti baris program di bawah ini.

Nah pada CSS di atas kalian bisa lihat, terdapat property CSS display dengan nilai flex, align-item dengan nilai center, dan justify-content dengan nilai center pada selector container, nah fungsi dari property CSS tersebutlah yang membuat elemen akan berada di tengah secara vertikal dan horizontal dan jangan lupa juga tentukan height dengan nilai 100% pada selector container nya.

Maka jika kalian jalankan hasilnya seperti berikut.

Mudah ya teman-teman, sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya ya. Terima kasih.

26 Oktober 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat