.center {
margin: auto;
width: 60%;
border:3px solid #8AC007;
padding: 10px;
}
Tip: Pusat menyelaraskan tidak berpengaruh jika properti lebar tidak diatur (atau set ke 100%). Tip: Untuk menyelaraskan teks, lihat bab CSS Text.
Left and Right Align - Using position
Salah satu metode menyelaraskan elemen adalah dengan menggunakan position: absolute ;:
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
Catatan: elemen diposisikan Absolute dikeluarkan dari aliran normal, dan dapat tumpang tindih elemen. Tip: Ketika menyelaraskan elemen dengan posisi, selalu menentukan margin dan padding untuk <body> elemen. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda. Ada juga masalah dengan IE8 dan sebelumnya, ketika menggunakan 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. Jadi, selalu mengatur deklarasi DOCTYPE ketika menggunakan posisi:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Left and Right Align - Using float
Metode lain menyelaraskan elemen adalah dengan menggunakan properti float:
.right {
float: right;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
float: right;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
Tip: Ketika menyelaraskan elemen dengan float, selalu menentukan margin dan padding untuk <body> elemen. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda. Ada juga masalah dengan IE8 dan sebelumnya, ketika menggunakan pelampung. Jika DOCTYPE deklarasi! Hilang, IE8 dan versi sebelumnya akan menambahkan margin menjadi 17px di sisi kanan. Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Jadi, selalu mengatur deklarasi DOCTYPE ketika menggunakan Float!:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
No comments:
Post a Comment