Cara Membuat Element HTML Menjadi Ditengah

Arsal Kashi

23 Nov, 2022

Cara Membuat Element HTML Menjadi Ditengah

Pada postingan kali ini saya akan memberikan tutorial cara membuat element HTML agar berada ditengah, seperti element form, gambar, paragraf, dan lain-lain bisa menggunakan cara ini. Namun pada postingan ini saya hanya akan memberikan contoh div atau teks menjadi ditengah.

Untuk membuat atau mengikuti tutorial ini, buka terlebih dahulu text editor dan browser kesayangan kamu. Kemudian siapkan juga file index.html (kosongan) dan file css-index.css (kosongan).

Selanjutnya kita buat atau isi file index.html dengan tag-tag berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css-index.css" />
    <title>Cara Membuat Element HTML Menjadi Ditengah</title>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <h1>Tes Element HTML Ditengah</h1>
      </div>
    </div>
  </body>
</html>

Didalam file index.html diatas terdapat dua class dari dua div, yang mana dua class dan dua div tersebut akan kita atur dengan menggunakan css, dengan menggunakan file css-index.css yang telah kita hubungkan dengan file index.html. Sehingga element HTML yang telah kita buat bisa menjadi ditengah.

Selanjutnya kita buat atau isi file css-index.css dengan tag-tag berikut ini :

*,
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 500px;
  height: 500px;
  background-color: aquamarine;
  color: black;
}

Didalam file css-index.css diatas saya memberikan beberapa properti didalam class container dan juga class wrapper.

Properti pada class container terdapat width 100%, yang mana agar width-nya menyesuaikan dengan ukuran device yang kita gunakan. Kemudian terdapat height 100vh, artinya tinggi yang kita tentukan adalah 100% dari tinggi induk. Selanjutnya terdapat properti display dengan nilai flex, artinya berfungsi untuk membuat elemen di dalamnya sejajar dengan sisi dengan rapi atau sesuai dengan yang kita inginkan. Sifat display flex ini hampir sama dengan tampilan inline-block yaitu membuat elemen sejajar dengan sisi-sisinya. Sekarang satu hal yang perlu kamu ketahui tentang display flex tidak akan berjalan di browser lama, display flex hanya akan berfungsi di browser versi terbaru sekarang dan nanti. Selanjutnya terdapat properti justify-content dengan nilai center, yang mana digunakan untuk menyelaraskan setiap item dalam wadah fleksibel, sehingga wadah dapat mendistribusikan ruang kosong yang tersisa ketika item fleksibel dalam satu baris tidak fleksibel atau meskipun fleksibel telah mencapai batas ukuran maksimum. Kemudian terdapat properti align-items dengan nilai center, align-items ini sendiri hampir sama dengan konsep justify-content. Namun, dalam align-items, item fleksibel disusun menurut sumbu y atau sepanjang garis tegak lurus atau vertikal.

Nah, itu dia poin-poin atau properti penting yang dapat kita gunakan untuk membuat element HTML menjadi berada ditengah. Sekarang coba kamu simpan file index.html dan css-index.css yang telah kamu isi dengan tag-tag yang berada diatas. Kemudian jalankan file index.html kamu dibrowser, gimana? Berhasil kan? Mudah bukan?

Baiklah mungkin cukup sekian tutorial kali ini, demikianlah artikel kali ini yang membahas tentang Cara Membuat Element HTML Menjadi Ditengah. Semoga bermanfaat, bagikan juga ke teman-teman kamu yang masih bingung tentang membuat element HTML menjadi ditengah.