Di bawah ini kita akan mempelajari cara memusatkan situs web secara horizontal dengan CSS
Website Berada Di Tengah
Seperti di bawah ini contohnya :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #555; } .content { max-width: 500px; margin: auto; background: white; padding: 10px; } </style> </head> <body> <div class="content"> <h1> Halaman ini secara horizontal berada di tengah layar yang lebih lebar dari 500 piksel. </h1> <h1> Ubah ukuran jendela browser untuk melihat efeknya. </h1> <p> Halaman ini selalu dipusatkan pada layar yang lebih lebar dari 500px. Di layar yang lebih kecil dari 500px lebarnya, itu akan menjangkau seluruh halaman. </p> </div> </body> </html>
Cara Website Berada Di Tengah
Gunakan elemen kontainer dan tetapkan max-width
tertentu.Umumnya lebar yang digunakan banyak situs web adalah 960px. Untuk benar-benar menengahkan halaman, tambahkan margin: auto
.
Contoh berikut akan memusatkan situs web pada layar yang lebih lebar dari 500px. Pada layar yang lebarnya kurang dari 500px, ini akan menjangkau seluruh halaman:
Contoh
<style> .content { max-width: 500px; margin: auto; } </style> <body> <div class="content"> <!-- Page content --> </div> </body>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #555; } .content { max-width: 500px; margin: auto; background: white; padding: 10px; } </style> </head> <body> <div class="content"> <h1> Halaman ini secara horizontal di tengah layar yang lebih lebar dari 500 piksel. </h1> <h1> Ubah ukuran jendela browser untuk melihat efeknya. </h1> <p> Halaman ini selalu dipusatkan pada layar yang lebih lebar dari 500px. Di layar yang lebih kecil dari 500px lebarnya, itu akan menjangkau seluruh halaman. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> <p> Konten di dalam container ini dipusatkan secara horizontal. </p> </div> </body> </html>