Menyelaraskan Blok Elements
Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah.
Contoh unsur blok:
- <H1>
- <P>
- <Div>
Dalam bab ini kita akan menunjukkan cara untuk horizontal elemen menyelaraskan blok untuk tujuan tata letak.
Pusat Menyelaraskan Menggunakan Properti margin
Elemen blok dapat center-aligned dengan menetapkan margin kiri dan kanan untuk "auto".
Mengatur margin kiri dan kanan untuk auto menetapkan bahwa mereka harus membagi margin yang tersedia sama.Hasilnya adalah elemen yang berpusat:
.center {
margin-left: auto;
margin-right: auto;
}
Catatan: center-aligning tidak berpengaruh jika lebarnya adalah 100%.
Kiri dan Kanan align Menggunakan Properti position
Salah satu metode menyelaraskan elemen adalah dengan menggunakan posisi absolut:
.abc {
position; absolute;
right: 0px;
width: 300px;
background-color: navy;
}
Crossbrowser Masalah Kompatibilitas
Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine margin dan padding untuk <body> elemen. 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 yang ditentukan, dan deklarasi DOCTYPE! Hilang, IE8 dan versi sebelumnya akan menambahkan margin menjadi 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: yellow;
}
Kiri dan Kanan Menyelaraskan Menggunakan float Properti
Salah satu metode menyelaraskan elemen adalah dengan menggunakan properti float:
.abc {
float: right;
width: 300px;
background-color: green;
}
0 komentar:
Posting Komentar