Materi belajar css kali ini adalah property css align. Yang akan kita bahas adalah horizontal align. Kenapa horizontal align? Karena didalam css beberapa property menggunakan elemen align horizontal. Fungsi dari align itu sendiri adalah untuk membuat perataan.
Elemen Align Block
Elemen block merupakan elemen yang mengambil keseluruhan lebar yang tersedia. Dan memiliki satu baris sebelum dan sesudahnya. Contoh dari blok elemen adalah :
- <h1>
- <p>
- <div>
Center Align menggunakan property margin
Block elemen dapat dijadikan align dengan mengatur kiri dan kanan margin menggunakan “auto” , dengan catatan kalau menggunakan margin align tidak dapat bekerja kalau menggunakan browser IE, kecuali mengikutkan deklarasi !DOCTYPE
Mengatur margin kiri dan kanan ke “auto” berbarti bahwa mereka membagi sama margin yang tersedia Contoh kodenya :
1
2
3
4
5
6
7
8
9
10
11
12
13
| .center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;} |
Left dan Right Align menggunakan property position
Salah satu metode align dengan menggunakan absolute position :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| .right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;} Align Left dan Right menggunakan property floatSalah satu metode align adalah dengan menggunakan property float, kodenya :.right{float:right;width:300px;background-color:#b0e0e6;} |
Ok, kita sudah membahas metode-metode dalam mengatur align. Semakin mudah bukan dalam mempelajari css? Jangan lupa untuk terus belajar caranya dengan membuat beberapa versi seperti yang telah dicontohkan diatas, dicoba di notepad dan dilihat hasilnya menggunakan browser.
0 comments:
Post a Comment