Latest web development tutorials

CSS keselarasan horizontal (Horizontal Align)

Dalam CSS, ada beberapa properti untuk elemen penyelarasan horisontal.

Menyelaraskan elemen blok

Elemen blok merupakan elemen, mengambil lebar penuh dari depan dan belakang yang jeda baris.

Contoh elemen blok:

  • <H1>
  • <P>
  • <Div>

Teks alignment, melihat teks CSS bagian. .

Dalam bab ini, kami akan menunjukkan cara untuk memblokir penyelarasan horisontal elemen tata letak.

Pusat-blok, menggunakan properti marjin

elemen blok dapat margin kiri dan kanan diatur ke "Auto" keselarasan.

Catatan: Gunakan margin IE8: properti otomatis tidak bekerja, kecuali DOCTYPE menyatakan!

Sifat marjin dapat sewenang-wenang dibagi menjadi kiri dan pengaturan margin kanan secara otomatis ditetapkan, hasilnya adalah munculnya elemen tengah:

contoh

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

Coba »

Tip: Jika lebar adalah 100%, pelurusan tidak efektif.

Catatan: IE5 ada margin dalam pengolahan elemen blok BUG.Untuk membuat contoh di atas bekerja di IE5, kita perlu menambahkan beberapa kode tambahan. contoh

Menggunakan properti posisi diatur ke kiri, sejajar kanan

Salah satu elemen keselarasan adalah dengan menggunakan posisi absolut:

contoh

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

Coba »

Catatan: posisi Absolute tidak ada hubungannya dengan aliran dokumen, sehingga mereka dapat menutupi elemen lain pada halaman.

Masalah Kompatibilitas Crossbrowser

<P menyelaraskan serupa ketika unsur-unsur seperti, margin yang telah ditentukan dan elemen padding selalu ide yang baik. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.

IE8 dan sebelumnya memiliki masalah ketika menggunakan properti posisi. Jika elemen wadah (dalam hal ini <div class = "container">) lebar ditentukan ,! DOCTYPE deklarasi hilang, IE8 dan versi sebelumnya akan menambahkan margin 17px di sebelah kanan. Hal ini tampaknya menjadi ruang cadangan bergulir. Bila menggunakan properti posisi selalu diatur dalam deklarasi DOCTYPE!

contoh

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

Coba »

Menggunakan properti float ke kiri, kanan-blok

Menggunakan properti mengambang adalah salah satu metode penyelarasan elemen:

contoh

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

Coba »

Masalah Kompatibilitas Crossbrowser

Elemen sejajar seperti ini, pra-ditentukan margin dan padding elemen selalu merupakan ide yang baik. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.

IE8 dan sebelumnya memiliki masalah ketika menggunakan properti float. Jika elemen wadah (dalam hal ini <div class = "container">) lebar ditentukan ,! DOCTYPE deklarasi hilang, IE8 dan versi sebelumnya akan menambahkan margin 17px di sebelah kanan. Hal ini tampaknya menjadi ruang cadangan bergulir. Bila menggunakan properti float selalu diatur dalam deklarasi DOCTYPE!

contoh

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

Coba »