Desain situs web untuk bisnis dan organisasi lain seringkali memasukkan elemen branding dan pemasaran yang terdefinisi dengan baik. Jika situs web Anda memiliki halaman Web yang ingin Anda pusatkan, Anda dapat melakukannya sendiri menggunakan kombinasi kode HTML dan CSS (Cascading Style Sheet). Banyak pengembang menggunakan properti gulir untuk elemen halaman Web untuk menentukan properti pemusatan, tetapi ini tidak selalu dapat diandalkan. Untuk menentukan tata letak situs web terpusat dan halaman yang akan muncul tanpa bilah gulir, diperlukan beberapa deklarasi CSS.

1.

Buat halaman HTML Anda. Jika Anda memiliki halaman yang sudah Anda kerjakan, buka halaman itu. Kalau tidak, buat file baru di editor teks dan simpan dengan ekstensi ".html". Gunakan garis besar berikut:

Perhatikan bahwa halaman memiliki bagian untuk kode CSS di kepala dan elemen di dalam tubuh. Konten halaman harus ditempatkan di dalam elemen ini. Jika Anda bekerja dengan halaman yang ada, cari kode CSS untuknya, yang dapat disimpan dalam file CSS terpisah yang ditautkan dari kepala halaman Anda.

2.

Identifikasi wadah halaman dalam CSS. Untuk menata elemen yang mengandung, Anda harus mengidentifikasinya terlebih dahulu dalam kode CSS. Di bagian gaya di kepala halaman Anda, atau file terpisah jika itu yang Anda kerjakan, tambahkan pemilih dan garis besar berikut:

wadah {

}

Ini mengidentifikasi elemen dengan "wadah" sebagai atribut ID-nya. Deklarasi gaya untuk elemen akan muncul di antara tanda kurung buka dan tutup. Atau, Anda dapat mengidentifikasi elemen menggunakan nilai atribut kelas sebagai berikut:

.container {

}

Ini akan mengidentifikasi elemen berikut:

3.

Terapkan lebar tetap ke elemen untuk memusatkan kontennya. Untuk memusatkan elemen di halaman Anda, elemen yang mengandung harus memiliki lebar tetap. Tambahkan satu di antara kurung CSS untuk elemen "wadah" sebagai berikut:

lebar: 800px;

Ubah nilai ketinggian agar sesuai dengan desain Anda. Sekarang Anda dapat menerapkan properti margin, yang akan memaksa elemen untuk memusatkan di dalam halaman:

margin: otomatis;

4.

Cegah elemen agar tidak bergulir. Jika Anda tidak ingin halamannya bergulir, Anda perlu menerapkan properti tinggi ke elemen wadah sebagai berikut:

tinggi: 90%;

Ubah nilai yang sesuai dengan desain Anda. Jika elemen di dalam wadah menempati lebih banyak ruang daripada ini dan Anda ingin mencegah pengguliran, Anda perlu menyembunyikan elemen overflow sebagai berikut:

overflow: disembunyikan;

Ini akan menghentikan bilah gulir muncul bahkan jika konten halaman Anda menempati lebih dari tinggi yang dialokasikan dalam browser pengguna.

5.

Simpan dan lihat halaman Anda. Buka di browser atau unggah ke situs Anda untuk melihat hasilnya. Anda mungkin perlu melakukan penyesuaian untuk sampai pada desain yang Anda inginkan. Pastikan Anda menguji halaman setelah memiliki konten yang lengkap di dalamnya, karena penampilannya dapat sangat bervariasi.

Tip

• Browser Web yang berbeda menerapkan aturan CSS dalam berbagai cara, jadi pastikan Anda menguji halaman Anda di lebih dari satu.

Peringatan

• Menyembunyikan overflow elemen halaman Web dapat mencegah sebagian pengguna Anda melihat semua konten halaman Anda.