CSS: Vertical Align Untuk Elemen DIV


Meskipun jarang digunakan, vertical align terkadang diperlukan untuk beberapa elemen dalam desain layout sebuah halaman web. Pada awalnya vertical align hanya bisa digunakan untuk elemen tabel, tapi sekarang vertical align juga bisa digunakan untuk semua elemen termasuk div tag.

Beberapa contoh penggunaan vertical align ini sering kita temui pada Header dan footer, terkadang juga terdapat pada sidebar yang berupa menu dengan fixed position di tengah layar. Ada beberapa cara yang bisa digunakan untuk vertical align tanpa tabel.

Mensimulasikan elemen DIV sebagai tabel

Dengan cara ini kita membuat browser untuk mbaca elemen DIV sebagai sebuah tabel melalui CSS. Misalnya kita memiliki sebuah elemen DIV dengan ID “header”.

#header {
display: table;
width: 100%;
height: 200px;
}

Kemudian di dalamnya ada sebuah teks untuk judul pada header yang kita beri class “judul”.

.judul {
display: table-cell;
vertical-align: middle;
}

Pada kondisi di atas DIV akan dibaca sebagai tab dan class “judul” akan terbaca sebagai elemen dalam tabel, baik itu baris maupun kolom, dimana isi dari elemen ini memiliki vertical align dengan posisi di tengah.

Flex Box

Cara kedua adalah dengan menjadikan elemen DIV sebagai flex box yang merupakan salah satu fitur dari CSS3, menggunakan flex box kita hanya perlu mengubah format untuk DIV nya saja, sehingga bila kita memiliki senuah elemen DIV dengan ID “header” (seperti di atas), kita hanya perlu menginputkan :

#header {
display: flex;
align-items: center;
}

Hanya dengan kode CSS di atas maka isi dari DIV tersebut akan memiliki vertical align pada posisi di tengah.
Dengan kondisi di atas kita tidak perlu lagi menggunakan tabel untuk format isi vertical align dan bisa lebih bebas membuat layout khususnya layout yang responsif.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Jun 19, 2016