Tata Letak CSS - Align Horizontal ~ KODELOVER

Di CSS, beberapa properti bisa digunakan untuk menyelaraskan elemen secara horisontal.

Center Align - Menggunakan margin Mengatur lebar elemen tingkat blok akan mencegahnya merentang ke tepi wadahnya. Gunakan margin: auto ;, untuk memusatkan elemen secara horizontal ke dalam wadahnya.Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin:
Contoh

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

Tip: Penyelarasan pusat tidak berpengaruh jika properti lebar tidak disetel (atau disetel ke 100%).Tip: Untuk menyelaraskan teks, lihat bab Teks CSS.

Align Kiri dan Kanan - Menggunakan posisi
Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan posisi: absolute ;:
Contoh

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Catatan: Elemen diposisikan absolut dilepaskan dari aliran normal, dan bisa saling tumpang tindih.Tip: Saat menyelaraskan elemen dengan posisi, selalu tentukan margin dan padding untuk elemen <body>. Hal ini untuk menghindari perbedaan visual pada browser yang berbeda.
Ada juga masalah dengan IE8 dan sebelumnya, saat menggunakan posisi. Jika elemen kontainer (dalam kasus kami <div class = "container">) memiliki lebar yang ditentukan, dan deklarasi DOCTYPE hilang, IE8 dan versi sebelumnya akan menambahkan margin 17px di sisi kanan. Ini tampaknya ruang yang dipesan untuk scrollbar. Jadi, selalu tetapkan deklarasi DOCTYPE saat menggunakan posisi:
Contoh

body {
    margin: 0;
    padding: 0;
}

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

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

Align Kiri dan Kanan- Menggunakan float

Metode lain untuk menyelaraskan elemen adalah dengan menggunakan properti float :Contoh

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Tip: Saat menyelaraskan elemen dengan float, selalu tentukan margin dan padding untuk elemen <body>. Hal ini untuk menghindari perbedaan visual pada browser yang berbeda.Ada juga masalah dengan IE8 dan sebelumnya, saat menggunakan float. Jika deklarasi DOCTYPE hilang, IE8 dan versi sebelumnya akan menambahkan margin 17px di sisi kanan. Ini tampaknya ruang yang dipesan untuk scrollbar. Jadi, selalu tetapkan deklarasi DOCTYPE saat menggunakan float:
Contoh

body {
    margin: 0;
    padding: 0;
}

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

KODELOVER

Tata Letak CSS - Align Horizontal

Di CSS, beberapa properti bisa digunakan untuk menyelaraskan elemen secara horisontal.

Align Kiri dan Kanan- Menggunakan float

Related Post