Menyelaraskan Elemen Blok
- <h1>
- <p>
- <div>
Pusat Menyelaraskan Menggunakan Properti marjin
Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi sama margin yang tersedia. Hasilnya adalah elemen berpusat:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Tip: Menyelaraskan tidak berpengaruh jika lebar adalah 100%.
Catatan: Dalam IE5 ada penanganan marjin bug untuk elemen blok. Untuk membuat contoh di atas bekerja
di IE5, menambahkan beberapa kode tambahan. Cobalah sendiri
Kiri dan Kanan Alignment Menggunakan Properti posisi
Salah satu metode elemen menyelaraskan adalah dengan menggunakan posisi absolut:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Masalah Kompatibilitas Crossbrowser
Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine
margin dan padding untuk elemen body. Hal ini untuk menghindari perbedaan visual dalam browser
yang berbeda.
Ada masalah dengan IE8 dan sebelumnya, ketika menggunakan properti posisi. Jika elemen wadah (
dalam kasus kami <div class=”container”>) memiliki lebar tertentu, dan deklarasi! DOCTYPE yang
hilang, versi IE8 dan sebelumnya akan menambahkan margin 17px di sisi kanan. Hal ini tampaknya
menjadi ruang dicadangkan untuk scrollbar. Selalu mengatur deklarasi DOCTYPE ketika menggunakan
properti posisi:
body { margin:0; padding:0; } .container { position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
Kiri dan Kanan Alignment Menggunakan Properti mengapung
Salah satu metode elemen menyelaraskan adalah dengan menggunakan properti float:
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Masalah Kompatibilitas Crossbrowser
Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine margin
dan padding untuk elemen body. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.
Ada masalah dengan IE8 dan sebelumnya saat menggunakan properti float. Jika deklarasi!
DOCTYPE yang hilang, versi IE8 dan sebelumnya akan menambahkan margin 17px di sisi kanan.
Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Selalu mengatur deklarasi DOCTYPE
ketika menggunakan properti mengapung!:
body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; }