CSS LAYOUT - INLINE-BLOCK
inline-block seperti elemen inline tetapi inline-block memiliki lebar dan tinggi
Contoh :
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #0000ff;
}
.after-box {
border: 3px solid red;
}
CSS LAYOUT HORIZONTAL & VERTICAL ALIGN
Center Align Element
Untuk horizontal secara berpusat dapat menggunakan margin-auto; Mengatur lebar dari elemen akan mencegah dari peregangan keluar tepi wadah. Kemudian akan mengambil lebar tertentu dan ruang yang tersisa akan dibagi sama antara kedua margin.
Contoh :
.center {
margin: auto;
width: 60%;
border: 3px solid #ff0000;
padding: 10px;
}
Center Align Text
text-align: center; digunakan untuk menampilakan teks tengah dalam sebuah elemen.
Contoh
.center {
text-align: center;
border: 3px solid green;
}
Center Image
Agar gambar dapat terpusat dapat menggunakan margin:auto dan membuatnya menjadi elemen blok.
Contoh :
img {
display: block;
margin: 0 auto;
}
Mengatur Left dan Right Align menggunakan Position
Untuk mnggunakan position selalu menentukan margin dan pading untuk <body> agar menghindari perbedaan visual dalam browser yang berbeda.
Contoh :
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #ff0000;
padding: 10px;
}
Mengatur Left dan Right Align menggunakan Float.
Selain itu kita dapat menyelaraskan dengan menggunakan properti float. Sama dengan menggunakan position. Untuk mnggunakan position selalu menentukan margin dan pading untuk <body> agar menghindari perbedaan visual dalam browser yang berbeda.
Contoh :
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
Mengatur Center Vertikal menggunakan Padding.
Ada banyak cara untuk pusat elemen vertikal, yaitu juga bisa menggunakan padding untuk mengaturnya.
Contoh :
.center {
padding: 70px 0;
border: 3px solid blue;
}
Untuk text-align: canter; juga bisa menggunakan padding.
Mengatur Center Vertikal menggunakan Line-height.
Dengan menggunakan line-height sama halnya dengan menggunakan properti height.
.center {
line-height: 200px;
height: 200px;
border: 3px solid blue;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Mengatur Center Vertikal menggunakan Position dan Transform.
Untuk mengatur center vertikal metode lain juga ada yaitu menggunakan posisi dan properti transform.
Contoh :
.center {
height: 200px;
position: relative;
border: 3px solid blue;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Referensi :
http://www.w3schools.com/css/css_align.asp
http://www.w3schools.com/css/css_inline-block.asp
Sekian dan terimaksih
0 komentar:
Posting Komentar