CSS Horizontal Align
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Dalam CSS, beberapa properti yang digunakan untuk menyelaraskan elemen horizontal.
Menyelaraskan Block Elemen
Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan sesudahnya.
Contoh unsur-unsur blok:
<h1>
<p>
<div>
Untuk menyelaraskan teks, lihat bab CSS Text.
Dalam bab ini kita akan menunjukkan cara untuk horizontal elemen menyelaraskan blok untuk keperluan tata letak.
Pusat Menyelaraskan Menggunakan Properti marjin
Unsur-unsur blok dapat center-aligned dengan menetapkan margin kiri dan kanan untuk "auto".
Catatan Catatan: Menggunakan margin: auto; tidak akan bekerja di IE8 dan sebelumnya, kecuali DOCTYPE! dinyatakan.
Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi margin yang tersedia sama. Hasilnya adalah elemen berpusat:
contoh
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: # b0e0e6;
}
Cobalah sendiri »
Tip: Pusat menyelaraskan tidak berpengaruh jika lebar adalah 100%.
Kiri dan Kanan Menyelaraskan Menggunakan Properti posisi
Salah satu metode menyelaraskan elemen adalah dengan menggunakan posisi absolut:
contoh
.right {
position: absolute;
kanan: 0px;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
Catatan: elemen diposisikan Absolute dikeluarkan dari aliran normal, dan dapat tumpang tindih elemen.
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 tertentu, 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:
contoh
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
kanan: 0px;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
Kiri dan Kanan Menyelaraskan Menggunakan float Properti
Salah satu metode menyelaraskan elemen adalah dengan menggunakan properti float:
contoh
.right {
float: right;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
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 saat menggunakan properti float. Jika DOCTYPE deklarasi! 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 mengapung!:
contoh
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: # b0e0e6;
}
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Dalam CSS, beberapa properti yang digunakan untuk menyelaraskan elemen horizontal.
Menyelaraskan Block Elemen
Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan sesudahnya.
Contoh unsur-unsur blok:
<h1>
<p>
<div>
Untuk menyelaraskan teks, lihat bab CSS Text.
Dalam bab ini kita akan menunjukkan cara untuk horizontal elemen menyelaraskan blok untuk keperluan tata letak.
Pusat Menyelaraskan Menggunakan Properti marjin
Unsur-unsur blok dapat center-aligned dengan menetapkan margin kiri dan kanan untuk "auto".
Catatan Catatan: Menggunakan margin: auto; tidak akan bekerja di IE8 dan sebelumnya, kecuali DOCTYPE! dinyatakan.
Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi margin yang tersedia sama. Hasilnya adalah elemen berpusat:
contoh
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: # b0e0e6;
}
Cobalah sendiri »
Tip: Pusat menyelaraskan tidak berpengaruh jika lebar adalah 100%.
Kiri dan Kanan Menyelaraskan Menggunakan Properti posisi
Salah satu metode menyelaraskan elemen adalah dengan menggunakan posisi absolut:
contoh
.right {
position: absolute;
kanan: 0px;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
Catatan: elemen diposisikan Absolute dikeluarkan dari aliran normal, dan dapat tumpang tindih elemen.
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 tertentu, 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:
contoh
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
kanan: 0px;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
Kiri dan Kanan Menyelaraskan Menggunakan float Properti
Salah satu metode menyelaraskan elemen adalah dengan menggunakan properti float:
contoh
.right {
float: right;
width: 300px;
background-color: # b0e0e6;
}
Cobalah sendiri »
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 saat menggunakan properti float. Jika DOCTYPE deklarasi! 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 mengapung!:
contoh
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: # b0e0e6;
}
Tidak ada komentar:
Posting Komentar