Dalam CSS, beberapa properti dapat digunakan untuk menyelaraskan elemen horizontal.
Pusat Rata - Menggunakan margin
Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Gunakan margin: auto; , untuk horizontal pusat elemen dalam wadah.
Unsur kemudian akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin:
Contoh
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Cobalah sendiri " Tip: Pusat menyelaraskan tidak berpengaruh jika width properti tidak diatur (atau set ke 100%).
Tip: Untuk menyelaraskan teks, melihat CSS Text bab.
Kiri dan Kanan - Menggunakan position
Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan position: absolute; :
Contoh
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Cobalah sendiri " Catatan: elemen strategis Absolute dikeluarkan dari aliran normal, dan dapat tumpang tindih elemen.
Tip: Ketika menyelaraskan elemen dengan position , 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 position . Jika elemen wadah (dalam kasus kami <div class="container"> ) memiliki lebar yang ditentukan, dan !DOCTYPE Deklarasi hilang, IE8 dan versi sebelumnya akan menambahkan 17px margin di sisi kanan. Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Jadi, selalu mengatur !DOCTYPE Deklarasi ketika menggunakan position :
Contoh
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Cobalah sendiri " Kiri dan Kanan - Menggunakan float
Metode lain untuk menyelaraskan elemen adalah dengan menggunakan float properti:
Contoh
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Cobalah sendiri " 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 float . Jika !DOCTYPE Deklarasi hilang, IE8 dan versi sebelumnya akan menambahkan 17px margin di sisi kanan. Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Jadi, selalu mengatur !DOCTYPE Deklarasi ketika menggunakan float :
Contoh
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Cobalah sendiri "