Bagaimana cara membuat teks atau elemen di tengah halaman web? . Walaupun terdengar sederhana, namun faktanya membuat posisi elemen di tengah dengan CSS itu mudah dan sulit. Yuk langsung praktekkan tutorial berikut ini
Pertama-tama saya berterima kasih atas keberadaan CSS Flexbox alias display:flex yang telah menyederhanakan teknik mediasi elemen di web dan blog. Sebelum keduanya ada, biasanya saya (dan mungkin kebanyakan orang juga) menggunakan position:absolute atau position:fixed
Saya tidak mengatakan bahwa position itu buruk atau kuno, hanya saja saya merasa bahwa <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }0 lebih mudah digunakan karena tidak perlu lagi mengatur <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }1 atau nilai <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }2, <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }3, <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }4, dan <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }5
Sehingga posisi elemen berada di tengah-tengah blog
Saya akan membuat kelas CSS baru bernama <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }6 sehingga ketika dipanggil, itu hanya akan ditulis dalam HTML
PENTING. Pastikan dulu tidak ada kelas CSS lain yang bernama <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }6 di blog agar kode tidak bentrok. Kalau sudah ada tinggal ganti nama class <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }6 sesuai keinginan yang penting unik
1. Posisi Tengah Horisontal
Bisa juga disebut posisi elemen di tengah yang rata kiri dan kanan. Ini adalah posisi tengah yang biasanya dimaksud orang
<!-- Center Element Horizontal by igniel.com --> .center { display: flex; justify-content: center; }_Baca Juga. Cara Menempatkan Iklan Berulang di Tengah Artikel
2. Posisi Tengah Vertikal
Anda juga bisa menyebutnya posisi tengah rata atas dan bawah. Sebenarnya hampir tidak ada orang yang menggunakan posisi ini, tetapi saya akan tetap menulisnya. Posisinya akan mengikuti ketinggian elemen utama
Baca Juga. Cara Menempatkan Multi Related Post di Tengah Artikel
Artinya jika blog masih kosong, otomatis badan blog akan setinggi teks. Jadi jika ingin menggunakan posisi ini, pastikan tubuh memiliki tinggi badan 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 cukup sering dicari
<!-- Center Element Horizontal Vertical by igniel.com --> .center { display: flex; align-items: center; justify-content: center; height: 100%; }Cara Menggunakan Elemen Posisi CSS di Tengah
- Pilih salah satu kode CSS yang sudah ditulis diatas
- Simpan kode di pengaturan blog
- Saat menulis artikel, buatlah elemen <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }9 dan beri nama class <!-- Center Element Vertical by igniel.com --> .center { display: flex; align-items: center; height: 100%; }6 seperti contoh berikut
Anda juga bisa menambahkan properti <!-- Center Element Horizontal Vertical by igniel.com --> .center { display: flex; align-items: center; justify-content: center; height: 100%; }_1 untuk lebih memperkuat lebar (width) mengikuti ukuran lebar induk sehingga elemen benar-benar berada di tengah. Bahkan, untuk kasus sederhana seperti memediasi elemen ini, tidak perlu menggunakan <!-- Center Element Horizontal Vertical by igniel.com --> .center { display: flex; align-items: center; justify-content: center; height: 100%; }1. Tapi biar lebih afdol, pakai saja kalau mau. Tidak apa-apa
Kode di atas merupakan bentuk singkatan CSS yang jika dijelaskan memiliki nilai sebagai berikut
- tumbuh fleksibel. 1;
Memastikan bahwa elemen tumbuh sampai akhir (mengembang) - flex-menyusut. 0;
Memastikan lebar elemen tidak menyusut - berbasis fleksibel. 100%
Lebar elemen 100% mengikuti lebar induknya
Jadi kodenya 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%; }Itulah tutorial singkat cara membuat elemen di tengah posisi blog/web menggunakan CSS. Semoga bisa menambah sedikit informasi