Cara Menyelaraskan Elemen HTML ke Tengah
Dalam HTML, Anda dapat dengan mudah mengatur posisi elemen di dalam halaman web. Salah satu cara yang umum digunakan adalah dengan menyelaraskan elemen ke tengah. Artikel ini akan memandu Anda melalui beberapa metode untuk menyelaraskan elemen ke tengah secara horizontal dan vertikal menggunakan tag <body>.
Menyelaraskan Elemen Secara Horizontal
Untuk menyelaraskan elemen secara horizontal ke tengah, Anda dapat menggunakan properti CSS text-align.
Menyelaraskan Elemen ke Tengah
Judul Halaman
Ini adalah paragraf teks yang disejajarkan ke tengah.
Dalam kode di atas, properti text-align: center; diterapkan ke elemen <body>. Ini akan menyelaraskan semua teks dan elemen di dalam <body> ke tengah halaman secara horizontal.
Menyelaraskan Elemen Secara Vertikal
Menyelaraskan elemen secara vertikal ke tengah membutuhkan sedikit lebih banyak upaya. Berikut adalah beberapa cara untuk melakukannya:
1. Menggunakan display: flex
Salah satu cara yang paling umum digunakan adalah dengan menggunakan display: flex dan justify-content: center pada elemen <body>.
Menyelaraskan Elemen ke Tengah
Judul Halaman
Ini adalah paragraf teks yang disejajarkan ke tengah.
Dalam kode ini, display: flex mengubah <body> menjadi kontainer fleksibel. justify-content: center kemudian menyelaraskan konten ke tengah secara horizontal, sedangkan align-items: center menyelaraskan konten ke tengah secara vertikal. height: 100vh mengatur tinggi <body> agar sama dengan tinggi layar sehingga elemen dapat disejajarkan ke tengah secara vertikal.
2. Menggunakan display: table dan vertical-align: middle
Metode lain yang dapat digunakan adalah dengan mengubah elemen <body> menjadi tabel dengan display: table dan kemudian mengatur vertical-align: middle untuk menyelaraskan konten ke tengah secara vertikal.
Menyelaraskan Elemen ke Tengah
Judul Halaman
Ini adalah paragraf teks yang disejajarkan ke tengah.
Kode ini membungkus konten di dalam <div> dan mengubah <body> menjadi tabel. Dengan menggunakan vertical-align: middle pada div, konten di dalam div akan disejajarkan ke tengah secara vertikal.
Kesimpulan
Ada beberapa metode yang dapat digunakan untuk menyelaraskan elemen di dalam HTML ke tengah. Anda dapat memilih metode yang paling sesuai dengan kebutuhan Anda dan desain situs web Anda.