Belajar mengatur posisi dengan CSS align
Align pada CSS digunakan untuk menyelaraskan elemen secara horizontal atau vertikal. Ini tentang desi
Kegunaan CSS align
Align atau alignment pada CSS digunakan untuk menyelaraskan elemen secara horizontal atau vertikal. Ini tentang design web yang dimana mengatur elemen agar berpusat disuatu titik yang telah ditentukan. Ada beberapa cara untuk menyelaraskan elemen dalam CSS, silakan simak contoh-contoh dibawah ini:
Elemen align center
Anda bisa memusatkan elemen secara otomatis ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan properti margin: auto;
Dengan begitu elemen akan mengambil width dan mengisi ruang yang tersisa dan akan dibagi sama rata antara kedua margin secara horizontal.
div {
margin: auto;
width: 50%;
background-color: orange;
padding: 15px;
}
Text align center
Anda bisa memusatkan teks ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan properti text-align: center;
#p1 {
text-align: center;
border: 3px solid green;
}
Gambar align center
Anda bisa memusatkan gambar secara otomatis ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan properti margin: auto;
Elemen <img> mempunyai display default yaitu inline, agar berfungsi Anda harus memberinya style display: block;
img {
margin: auto;
display: block;
}
Position left dan right
Anda bisa menyelaraskan elemen agar berpusat disebelah kiri atau kanan dengan menggunakan properti position: absolute;
div {
background-color: orange;
padding: 10px 20px;
width: 200px;
}
#right {
position: absolute;
right: 20px;
}
#left {
position: absolute;
left: 20px;
}
Float left dan right
Anda bisa menyelaraskan elemen agar berpusat disebelah kiri atau kanan dengan menggunakan properti float: left;
dan float: right;
div {
background-color: orange;
padding: 10px 20px;
width: 200px;
}
#right {
float: right;
}
#left {
float: left;
}
Pusat vertikal menggunakan padding
Anda bisa menyelaraskan elemen agar berpusat secara vertikal dengan menggunakan properti padding
.
div {
padding: 65px 0;
border: 3px solid green;
}
Pusat vertikal menggunakan line-height
Anda bisa menyelaraskan elemen agar berpusat secara vertikal dengan menggunakan properti line-height
.
div {
line-height: 200px;
height: 200px;
border: 3px solid green;
}
div p {
line-height: 1.5;
display: inline-block;
}