Cara Membuat Website Berada Di Tengah

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 13, 2021

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>