Belajar mengatur posisi dengan CSS align

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;
}