Pada kesempatan kali ini saya akan menjelaskan cara membuat text berada di posisi middle dengan css. Seperti yang sudah teman-teman ketahui, jika ingin membuat text berada di posisi tengah element secara horizontal bisa menggunakan text-align:center; hanya saja posisi center tersebut berada diantara posisi tengah antara kiri dan kanan, namun bagaimana jika text tersebut ingin berada di posisi tengah horizontal dan vertical. Dan seperti yang teman-teman sudah ketahui, untuk menempatkan posisi text berada di tengah kotak element secara vertical dan horizontal hanya tersedia di table html, namun jika kasus tersebut ingin di terapkan pada kotak element html, bisa menggunakan property display dan vertical-align css, namun property tersebut hanya bisa digunakan apabila display dari suatu element pembungkusnya bersifat table, dan tag html text nya bersifat table-cell, yang nantinya property dari vertical-align pada css akan berpengaruh kepada text tersebut, lantas bagaimana cara membuatnya ?

Berikut tahapan nya:

  1. Teman-teman buat satu file dengan nama terserah, pada contoh di sini saya beri nama index.html, yang nantinya dari kode css tersebut saya gabung di dalam satu file html tersebut.
  2. Salin kode, seperti di bawah ini:

Keterangan:

  • property display:table; pada element kotak1, dimana berfungsi untuk merubah display nya menjadi table, dikarenakan property css vertical-align hanya di khususkan untuk table.
  • property display:table-cell; pada tag html p, dimana berfungsi untuk merubah display nya menjadi table-cell, dikarenakan property css vertical-align hanya berfungsi untuk cell table.

Jika sudah simpan file tersebut, dan akses pada browser teman-teman, maka akan tampil output nya seperti berikut:

cara-membuat-text-berada-di-posisi-middle-dengan-cssSampai di sini penjelasan saya cara membuat text berada di posisi middle dengan css, semoga bermanfaat.