CSS Align

Elemen blok merupakan elemen yang mengambil lebar penuh halaman yang tersedia, dan memiliki satu baris sebelum dan setelah.



Contoh elemen blok :

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

Untuk menyelaraskan teks, lihat halaman CSS Text. Disini kita akan menunjukkan cara untuk menyelaraskan horizontal elemen blok untuk keperluan tata letak.



Gunakan Properti margin

Elemen blok dapat disejajarkan dengan menetapkan margin kiri dan kanan atau "auto".

Catatan : Menggunakan margin: auto tidak akan bekerja di Internet Explorer , kecuali DOCTYPE dinyatakan ! .


Mengatur margin kiri dan kanan atau auto adalah menetapkan bahwa sisi kiri dan kanan dibagi bagi sama. Hasilnya adalah elemen center:


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


Tip : Penyelarasan / align elemen tidak berpengaruh jika lebarnya adalah 100%. 


Align Kiri dan Kanan Menggunakan Properti position

Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan posisi absolute: 


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


Catatan : elemen diposisikan Absolute berada diluar aliran/ flow normal, dan dapat tumpang tindih terhadap elemen lain.



Masalah Kompatibilitas Crossbrowser  

Ada masalah lain dengan IE ketika menggunakan properti position. Jika elemen kontainer( dalam kasus kami <div class="container"> ) memiliki lebar tertentu , dan deklarasi !DOCTYPE tidak ada, IE akan menambahkan margin 17px di sisi kanan. Hal ini tampaknya menjadi ruang kosong dayng berisi scrollbar. Cobalah untuk selalu mengatur deklarasi DOCTYPE ketika menggunakan properti position di IE :


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 Properti Float

Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan properti float:


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


Masalah Kompatibilitas Crossbrowser 

Ada juga masalah lain dengan IE bila menggunakan properti float. Jika deklarasi !DOCTYPE tidak ada, IE akan menambahkan margin 17px di sisi kanan . Hal ini tampaknya menjadi ruang kosong yang menampilkan scrollbar. Cobaah selalu mendeklarasi DOCTYPE ketika menggunakan properti float:


body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda