Tutorial CSS Horizontal Align

Dalam CSS, beberapa properti yang digunakan untuk menyelaraskan elemen horizontal.

Menyelaraskan Elemen Blok

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.Contoh unsur-unsur blok:

  •      <h1>
  •      <p>
  •      <div>
Untuk menyelaraskan teks, lihat bab Teks CSS.Dalam bab ini kami akan menunjukkan Anda bagaimana untuk menyelaraskan unsur-unsur blok horizontal untuk keperluan tata letak.

Pusat Menyelaraskan Menggunakan Properti marjin

Elemen blok dapat sejajar dengan menetapkan margin kiri dan kanan untuk “otomatis”.Catatan: Menggunakan margin: otomatis tidak akan bekerja di IE8 dan sebelumnya, kecuali dinyatakan DOCTYPE!.

Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi sama margin yang tersedia. Hasilnya adalah elemen berpusat:

.center

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

 

 

 

Tip: Menyelaraskan tidak berpengaruh jika lebar adalah 100%.

Catatan: Dalam IE5 ada penanganan marjin bug untuk elemen blok. Untuk membuat contoh di atas bekerja
di IE5, menambahkan beberapa kode tambahan. Cobalah sendiri

Kiri dan Kanan Alignment Menggunakan Properti posisi

Salah satu metode elemen menyelaraskan adalah dengan menggunakan posisi absolut:

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

 

 

 

Masalah Kompatibilitas Crossbrowser

Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine
margin dan padding untuk elemen body. 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 yang
hilang, versi IE8 dan sebelumnya akan menambahkan margin 17px di sisi kanan. Hal ini tampaknya
menjadi ruang dicadangkan untuk scrollbar. Selalu mengatur deklarasi DOCTYPE ketika menggunakan
properti posisi:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Kiri dan Kanan Alignment Menggunakan Properti mengapung

Salah satu metode elemen menyelaraskan adalah dengan menggunakan properti float:

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

Masalah Kompatibilitas Crossbrowser

Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine margin
dan padding untuk elemen body. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.

Ada masalah dengan IE8 dan sebelumnya saat menggunakan properti float. Jika deklarasi!
DOCTYPE yang hilang, versi IE8 dan sebelumnya akan menambahkan margin 17px di sisi kanan.
Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Selalu mengatur deklarasi DOCTYPE
ketika menggunakan properti mengapung!:

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Leave a Reply

Your email address will not be published. Required fields are marked *