Kursus Membuat Web

iklan

Horizontal Align CSS

Pada CSS, beberapa property digunakan untuk membuat elemen horizontal align.

Align Elemen Block

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelahnya.

Contoh elemen block

  • <h1>
  • <p>
  • <div>

Untuk teks align, lihat tentang Text CSS.

Pada bab ini kita akan mempelajari bagaimana membuat elemen block diatur horizontal alignnya untuk tujuan melayout.

Center Align Menggunakan Property Margin

Elemen block bisa diatur center align dengan mengatur margin left dan right ke "auto".

Catatan : menggunakan margin:auto; tidak akan bekerja di IE8 dan sebelumnya kecuali <!DOCTYPE html> dideklarasikan.

Mengatur margin left and right ke auto menetapkan bahwa mereka harus membagi margin yang tersedia sama. Hasilnya elemen menjadi berada di tengah.

Contoh
.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}
Lihat ...

Catatan : center align tidak akan berpengaruh jika lebar adalah 100%.

Left dan Right Align Menggunakan Property Position

Salah satu metode dari elemen align adalah menggunakan posisi absolut:

Contoh
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Lihat ...

Catatan : Elemen yang diposisikan absolut dihilangkan dari aliran normal flow, dan dapat tumpang tindih antara elemen.

Masalah Kompatibilitas Crossbrowser

Bila meng- align elemen, adalah ide yang bagus untuk mendefinisikan ulang margin dan padding pada elemen <body>. Ini untuk menghindari tampilan visual yang berbeda di browser yang berbeda.

Ada masalah dengan IE8 dan sebelumnya, bila menggunakan property position. jika isi elemen (pada kasus <div class="container">) menetapkan lebar, dan deklarasi <!DOCTYPE html> tidak ada, maka IE8 dan versi sebelumnya akan menambahkan 17px margin di sisi kanan. ini tampaknya ruang yang disisakan untuk scrollbar. Selalu deklarasikan <!DOCTYPE html> bila menggunakan property position:

Contoh
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Lihat ...

Left dan Right Align Menggunakan Property Float

Salah satu metode dari elemen align adalah menggunakan property float:

Contoh
.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
Lihat ...

Masalah Kompatibilitas Crossbrowser

Bila meng- align elemen, adalah ide yang bagus untuk mendefinisikan ulang margin dan padding pada elemen <body>. Ini untuk menghindari tampilan visual yang berbeda di browser yang berbeda.

Ada masalah dengan IE8 dan sebelumnya, bila menggunakan property float. jika isi elemen (pada kasus <div class="container">) menetapkan lebar, dan deklarasi <!DOCTYPE html> tidak ada, maka IE8 dan versi sebelumnya akan menambahkan 17px margin di sisi kanan. ini tampaknya ruang yang disisakan untuk scrollbar. Selalu deklarasikan <!DOCTYPE html> bila menggunakan property float:

Contoh
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
Lihat ...

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015