Cara Membuat Posisi Elemen Di Tengah

Menengahkan Elemen HTML di Blog

Bagaimanakah cara membuat teks atau elemen ada di tengah halaman web? Pertanyaan ini lumayan sering muncul di komentar blog Igniel. Meski terdengar sederhana, nyatanya membuat posisi elemen di tengah dengan CSS memang gampang-gampang susah. Mari kita langsung praktekan tutorial berikut ini.

Pertama-tama, saya bersyukur dengan adanya CSS Flexbox alias display:flex yang telah mempermudah teknik menengahkan elemen di web dan blog. Sebelum keduanya ada, biasanya saya (dan mungkin kebanyakan orang lain juga) menggunakan position:absolute atau position:fixed.

Saya tidak bilang bahwa CSS position tidak baik atau jadul ya, hanya saja saya merasa bahwa display lebih gampang untuk dipakai karena tidak perlu lagi mengatur margin atau nilai top, bottom, left, dan right.

Agar Posisi Elemen Ada di Tengah Blog

Saya akan membuat sebuah class CSS baru bernama .center agar saat pemanggilannya tinggal ditulis saja di HTML.

PENTING! Pastikan dulu bahwa tidak ada class CSS lain bernama .center di dalam blog agar kodenya tidak bentrok. Jika sudah ada, ganti saja nama class .center sesuai keinginan, yang penting unik.

1. Posisi Tengah Horizontal

CSS Elemen Tengah Horizontal
Elemen Tengah Horizontal

Bisa juga disebut posisi elemen di tengah yang rata kiri kanan. Ini posisi center yang lumrah dimaksud orang-orang.

<!-- Center Element Horizontal by igniel.com -->
.center {
  display: flex;
  justify-content: center;
}

2. Posisi Tengah Vertikal

Menengahkan Elemen HTML di Web
Elemen Tengah Vertikal

Kamu juga bisa menyebutnya posisi tengah rata atas bawah. Sebenarnya jarang ada yang pakai posisi ini, tapi tetap akan saya tulis. Posisinya akan mengikuti tinggi (height) elemen utama.

Maksudnya jika blog masih kosong, otomatis body-nya hanya setinggi ukuran teks. Jadi kalau mau pakai posisi ini, pastikan body memiliki tinggi yang cukup agar posisinya terlihat di tengah.

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

3. Posisi Tengah Horizontal dan Vertikal

Cara Membuat Elemen Di Tengah
Elemen Tengah Horizontal dan Vertikal

Posisi elemen di tengah rata kiri kanan atas bawah. Ini juga lumayan sering dicari nih.

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Cara Pakai CSS Posisi Elemen di Tengah

  1. Pilih salah satu kode CSS yang sudah ditulis di atas.
  2. Simpan kodenya di pengaturan blog.
  3. Saat menulis artikel, buat elemen div dan berikan nama class .center seperti contoh berikut:
<div class="center">
  <!-- Tuliskan teks atau elemen apapun yang ingin ditempatkan di tengah -->
</div>

Kamu juga bisa menambahkan properti flex untuk lebih mengukuhkan lebarnya (width) mengikuti ukuran lebar induk sehingga elemen benar-benar ada di tengah. Sebenarnya untuk kasus sederhana seperti menengahkan elemen ini, tidak perlu-perlu amat pakai flex. Tapi biar lebih afdol, pakai saja kalau mau. Gak apa-apa kok.

flex: 1 0 100%

Kode di atas adalah bentuk dari CSS shorthand yang jika dijabarkan memiliki nilai sebagai berikut:

  • flex-grow: 1;
    Memastikan elemen tumbuh sampai ujung (melebar).
  • flex-shrink: 0;
    Memastikan lebar elemen tidak menciut.
  • flex-basis: 100%
    Lebar dari elemen 100% mengikuti lebar induk.

Sehingga kode akhirnya kurang lebih seperti ini:

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1 0 100%;
}

Sekian tutorial singkat mengenai cara membuat elemen di tengah posisi blog / web menggunakan CSS. Semoga bisa sedikit menambah informasi.

Artikel Terkait

9 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Santos B. Harun & Keluarga
    18 September, 2022
    Profil: https://www.blogger.com/profile/05139913951174617969
    Terima kasih atas tutorialnya ya.
  • Wernayasa
    11 Juni, 2022
    Profil: https://www.blogger.com/profile/09171272848542294839
    Atau:display: grid;
    place-content: center;
    Atau:display: grid;
    place-items: center;
    • Giri Diwa Adam
      19 Oktober, 2022
      Profil: https://www.blogger.com/profile/11346759223421693465
      Bisa Juga pakai justify-content:center
  • Amir
    30 Mei, 2022
    Profil: https://www.blogger.com/profile/05062274712424026395
    thanks mbak igniel. aku banyak belajar dari blog ini
  • erDev
    30 Mei, 2022
    Profil: https://www.blogger.com/profile/02815976513972626716
    Kak buat tutor auto next artikel dong, semisal gini kita scroll artikel pas nyampe Unjung langsung muncul artikel lainnya jadi kyk nyatu gitu artikelnya dan lebih bagus kalo bisa di kostum sesuai label
    • Igniel
      30 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu sudah diterapkan di template Iglo, tapi dia ngambil artikel sebelumnya, bukan sesudahnya. Cek dulu aja dan ambil kodenya buat dipelajari sebelum tutorialnya ditulis.
      https://www.igniel.com/2018/09/iglo-blogger-template.html
    • Gustavo José
      04 Juli, 2022
      Profil: https://www.blogger.com/profile/04061393627412452769
      igniel, saya membuat versi baru dari template textrim, ideastopp.blogspot.com jika Anda ingin saya mengirimkan template dengan modifikasi, cukup kirimkan saya email kontak Anda dan saya akan mengirimkannya kepada Anda.
    • Gustavo José
      04 Juli, 2022
      Profil: https://www.blogger.com/profile/04061393627412452769
      Koreksi, link templatenya adalah: HTTPS://ideiastopp.blogspot.com
    • Igniel
      04 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      I appreciate your work, but Textrim is mean to be only displaying TEXT in homepage, like it's name, Textrim. Yours have images and it's not like Textrim anymore.

      But it's a good modification. Nice job.