Gunakan CSS untuk Memusatkan Dokumen dengan Tata Letak Lebar Tetap

Layout lebar tetap sulit untuk dipusatkan dengan beberapa browser populer di luar sana, tetapi mungkin, dengan hanya beberapa baris kode.

Here 's How

  1. Buat halaman Web baru dengan stylesheet CSS di editor HTML Anda.
  2. Buat elemen div sebagai elemen utama di halaman tempat Anda akan menyimpan semuanya di halaman.
  3. Berikan elemen div itu ID yang unik di halaman.
  4. Buka style sheet CSS Anda dan atur lebar elemen div Anda. div # main {width: 750px; }
  5. Tambahkan margin otomatis untuk memusatkan div Anda. div # main {width: 750px; margin-left: auto; margin-kanan: otomatis}
  6. Untuk memperbaikinya untuk Netscape 4, dan IE 4 - 6 ( mode quirks ) tambahkan teks-align pada body. body {text-align: center; }
  7. Tapi kemudian semua teks di dalam terpusat, jadi atur ulang teks di div #main Anda dengan menambahkan teks-rata: kiri; di sana. div # main {width: 750px; margin-left: auto; margin-kanan: otomatis; text-align: kiri; }
  8. Simpan halaman Anda dan style sheet Anda.
  9. Uji di beberapa browser Web.

Tip

Ini akan memusatkan kotak tata letak tetapi bukan konten di dalamnya. Gunakan text-align untuk memusatkan isi batin.