Bagi programmer web yang sering menggunakan table untuk merancang layout aplikasi, tentu tidak asing dengan namanya atribut vertical-align, dimana attribut tersebut digunakan untuk mengatur perataan konten/teks secara vertical supaya kelihatan lebih rapih, kalo secara horizontal kita mengenal dengan atribut align saja. Tapi attibut vertical-align tidak berjalan pada tag div ataupun span, berikut ini adalah cara supaya vertical-align bisa menyelesaikan permasalahan ini.

CARA 1, dengan menambahkan line-height

<div class="tengah2">Tengah - Tengah</div>
.tengah2 {
   text-align: center;
   vertical-align: middle;
   line-height: 300px;
   background: #ccc;
}

CARA 2, dengan menambahkan display table & table-cell

<span id="tabel">
    <span class="data-tabel">Tengah Tabel</span>
</span>


#tabel {
   display: table;
   background: yellow;
   height: 200px;
   width: 50%;
}

.data-tabel {
   display: table-cell;
   vertical-align: bottom;
   text-align: right;
}

Masalah tentang vertical-align ini terlihat sangat sepele, tapi cukup membuat risih juga kalo melihat tampilan yang kurang rapih. Mudah2an artikel tentang Menampilkan konten/teks rata tengah secara vertical (vertical-align) pada div atau span ini membantu. Untuk vertical-align sendiri bisa diisi dengan top, middle, bottom, dsb.

Kritik & saran silahkan coret2 di bawah. 😀

Advertisements