Menggunakan lebar, max-lebar dan margin: auto;
Seperti disebutkan dalam bab sebelumnya; elemen blok-tingkat selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).
Mengatur width dari elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Kemudian, Anda dapat mengatur margin untuk auto, untuk horizontal pusat elemen dalam wadah. elemen akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin:
Catatan: Masalah dengan <div> di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen. Browser kemudian menambahkan scrollbar horisontal ke halaman.
Menggunakan max-width sebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil. Hal ini penting ketika membuat sebuah situs yang dapat digunakan pada perangkat kecil:
Tip: Mengubah ukuran jendela browser untuk kurang dari 500px lebar, untuk melihat perbedaan antara kedua divs!
Berikut adalah contoh dari dua divs di atas:
Contoh
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Cobalah sendiri "