HTML Membuat Vertical dan Horizontal Align Centered CSS


Bagi teman-teman yang kesulitan membuat div ataupun popup berada di tengah-tengah layar, saya kasih tutorialnya:

centered

untuk membuat seperti gambar diatas, kita dapat memanfaatkan style pada tabel, dan membutuhkan minimal 3 div. div pertama sebagai pengganti tag <table> div kedua sebagai pengganti tag <tr> dan div ketiga sebagai pengganti <td>

berikut adalah posisi script untuk div diatas:

centerd2

dan berikut adalah pengaturan pada CSSnya:

centered3

Penjelasan:

  • Pada ID #table style yang harus ada adalah display:table; width dan height. display:table digunakan untuk menunjukkan bahwa div akan ditampilkan seperti tabel, tanpa style ini maka tidak akan bisa membuat vertical centered.
  • Pada ID #tr display:table-cell; digunakan untuk menampilkan div seperti cell pada tabel, dan agar style vertical-align:middle; dapat digunakan. vertical-align:middle; digunakan untuk membuat vertical centered.
  • pada ID #td style yang harus ada adalah margin:auto; width dan height. margin:auto; digunakan untuk membuat pengaturan margin otomatis.

contoh dapat didownload disini

rename file sample.doc menjadi sample.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s