Archives Code

Arsip atau kumpulan kode penting untuk tujuan pengembangan website gratis

  • Home
  • Java
  • wordpress
  • Blogspot
  • Tutorial
  • Other
Beranda » css » Tutorial » wordpress » Cara Membuat Posisi Tengah Content dengan Pure css

Cara Membuat Posisi Tengah Content dengan Pure css


Apa kabar sobat??
Pada kesempatan ini kami akan menjelaskan tentang bagaimana cara membuat posisi tengah kontent dengan pure css tentunya dengan tanpa ribet dan berbelit belit

Ada cara simpel dan sederhana untuk membuat posisi tengah secara vertical dengan menggunakan pure css / dengan hanya menggunakan css saja.

caranya cukup simpel sob yaitu misal sobat mempunyai kode html seperti di bawah ini

<div class="parent-content">
    <div class="midle-content">Lorem Ipsum midle content</div>
</div>

untuk membuat tengah konten diatas cukup sobat membuat position menjadi relative selanjutnya menambahkan css top 50%

mari kita coba untuk membuat css nya

.parent-content {
  width : 100%;
  height : 100%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.midle-content{
position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Sudah selese sob, cukup simpel bukan??selamat mencoba semoga berhasil silakan tinggalkan komentar apabila ada yang perlu didiskusikan,

Kritikan, masukan, usulan dan saran yang sifatnya membangun sangat kami harapkan dari sobat semuanya, agar blog sederhana ini semakin bermanfaat bagi ummat dunia maya dimanapun berada.

Sukses dan salam bravoo sob.!!!

Related post:

Newer Post
Older Post
Home

Popular Posts

  • Mengatasi Status Disconnect di Kalkun Terupdate 2018
    Selamat malam dan selamat begadang untuk para mastah sekalian, jangan lupa sruput kopinya sebelum membaca artikel ini, hehe Pada w...
  • Cara Mengembalikan Visitor Blog Yang Menghilang dengan mudah
    ARCHIVESCODE - Setelah kita membuat suatu blog dengan susah payah siang malam tidak tidur maka saatnya para pengunjung blog setia akan data...
  • 5 Cara Menurunkan RKT Halaman Pada Adsense Terbaru
    Halo sahabat archivescode yang berbahagia dimanapun kalian berada, bertemu lagi dengan kita yang selalu memberi info kekinian tentang blog,...
  • 6 Sebab Pengunjung Blog Menurun Tajam ( Penelitian ) Terbaru
    Hai kamu yang baru saja mengunjungi web sederhana ini, semoga akan betah lama-lama di blog ini, karena banyak info bagus yang mungkin kamu...
  • ( NEW ) Cara Menambahkan Fanspage di Blogspot Dengan Mudah 2018
    Halo sobat coding semua, pada kesempatan yang baik kali ini kami akan menuliskan artikel tentang Cara Menambahkan Fanspage di Blogspot deng...
  • Daftar Kode Warna HTML Lengkap Terbaru 2018
    ARCHIVESCODE - Halo sobat coding dimanapun kalian berada, pada kali ini kita akan membagikan beberapa kode HTML warna yang tentunya sangat...
  • ( NEW ) Menampilkan Tanggal Sekarang Dengan php 2018
    Selamat pagi  pembaca yang selalu aktif dalam mencari artikel artikel yang bermanfanfaat untuk pengembangan web anda. Baiklah pembaca...
  • Mengatasi error THIS EMAIL ADDRESS DOES NOT BELONG TO THE SAME DOMAIN AS THE SITE pada Contact form 7
    Mengatasi error THIS EMAIL ADDRESS DOES NOT BELONG TO THE SAME DOMAIN AS THE SITE pada Contact form 7 Pernah mengalami error THIS EMAIL A...
  • Cara mengirim email di wordpress dengan wp_mail()
    halo sobat archives code, pada kesempatan kali ini kami akan menjelaskan tentang cara mengirim email di wordpress dengan wp_mail() . belu...
  • Cara membuat file csv dengan c++ / cara write file csv dengan c++
    halo sobat dunia nyata maupun dunia maya sekalian, ..... bertemu lagi dengan kami yang selalu menunggu kedatanganmu..hehe pada kal...
Copyright © 2014 Archives Code - Powered by Blogger
Template by Mas Sugeng - Versi Seluler