Cara mengatur posisi link di html

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

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

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

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

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

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

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

Agar Posisi Elemen Ada di Tengah Blog

Saya akan membuat sebuah class CSS baru bernama

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

PENTING! Pastikan dulu bahwa tidak ada class CSS lain bernama

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

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

1. Posisi 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;
}

Baca Juga: Cara Pasang Iklan Berulang di Tengah Artikel

2. Posisi 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.

Baca Juga: Cara Pasang Multi Related Post di Tengah Artikel

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

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

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

   9 dan berikan nama class

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

   6 seperti contoh berikut:

<div class="center">
  <!-- Tuliskan teks atau elemen apapun yang ingin ditempatkan di tengah -->
</div>

Kamu juga bisa menambahkan properti

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

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

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.

Bagaimana Membuat tag link di HTML?

Apa itu a href dalam HTML?

Jelaskan apa yang dimaksud dengan CSS?