Anti Copy - No Copy,6,Background,7,Blog dan Email,6,Blogging Tips,31,Box,12,CSS,189,Cursor,9,Daftar Tampilan,16,Desain Template,22,Digital Clock,6,Effect,66,Elements,2,Fade Effect,1,File Blog,4,File Hosting,6,flash,3,Font,4,gadget - widget,2,Gambar dan Animasi,23,Google,2,Halaman Statis,1,Highlight Text,4,HTML,22,iframe,2,Image Effects,16,Images Gallery,15,Info,10,Informasi SEO,10,Javascript,162,jQuery,21,Komentar,13,Lightbox,7,Link,2,Loader,1,Marquee Effect,7,Media Viewer,7,Menu,30,Modifikasi Blog,90,Modifikasi Blog BloGGer Baru,51,Navigasi,11,Panduan BloGGeR,141,Pemula,10,Promosi Blog,8,Read more,12,Responsive,8,Romantica CINTA,1,Search Form,1,SEO,7,SEO Trik,8,Slideshow,1,Syntax Highlighter,1,Tabs,4,tagcloud,6,Template,15,Text Effects,10,Textarea,4,Tips dan Trik Blogger,129,ToolTip,12,Trik,63,Trik SEO,4,Tutorial Blog,14,Tutorial BlogDETIK,30,Tutorial Blogger,270,Widget,69,Wordpress,8, Show Membuat sebuah elemen agar bisa berada di tengah-tengah halaman web sebenarnya merupakan hal yang sederhana. Tetapi hal ini sering sekali membuat para web developer pemula merasa bingung untuk melakukannya. Pada tutorial kali ini, saya akan berbagi trik untuk membuat sebuah elemen atau item agar berada di tengah halaman atau elemen lain. Ada 6 cara untuk melakukan hal tersebut dengan menggunakan CSS. Berikut ini caranya:
Isi Konten1. Menggunakan Text-AlignMetode Namun cara ini juga bisa digunakan untuk menengahkan elemen lain seperti Berikut ini langkah-langkah implementasinya:
Contoh: HTML CSS Preview
2. Menggunakan Margin AutoCara kedua ini sering digunakan untuk menengahkan sebuah konten halaman secara horizontal seperti pada cara pertama. Langsung saja ke langkah-langkah pembuatannya:
Contoh: HTML CSS Preview
Contoh lain untuk menengahkan gambar: Contoh: HTML CSS Preview
3. Menggunakan Posisi AbsolutePada materi tentang position CSS sudah dijelaskan mengenai perilaku posisi “absolute” yang tidak mengikuti aliran halaman. Sehingga dengan posisi “absolute” kita bisa menempatkan elemen dimanapun pada halaman tanpa terpengaruh oleh posisi elemen lain. Termasuk juga bisa digunakan untuk menengahkan elemen di dalam elemen lain. Begini langkah-langkahnya:
Contoh: HTML CSS Preview
4. Menggunakan Transform dan TranslateCara-cara yang kita pelajari di atas, digunakan untuk menengahkan elemen secara horizontal. Lalu bagaimana jika kita ingin membuat elemen agar bisa berada di tengah-tengah elemen lain secara vertikal dan horizontal. Kita pakai cara ini:
Sekarang lihat hasilnya… Elemen box kamu bisa tepat berada ditengah-tengah. Contoh: HTML CSS Preview
5. Menggunakan FlexboxIni merupakan cara favorit yang paling sering saya gunakan untuk membuat elemen agar bisa berada di tengah baik secara horizontal maupun vertikal. Cara membuatnya mirip dengan cara-cara sebelumnya, namun menurut saya cara ini yang paling mudah dipahami oleh pemula. Terutama untuk membuat elemen agar bisa di tengah-tengah secara vertikal dan horizontal. Begini langkah-langkah membuatnya:
Contoh: HTML CSS Preview
6. Di Tengah secara VertikalCara terakhir ini digunakan untuk membuat elemen agar berada di tengah secara vertikal. Caranya mirip dengan nomor 4 yaitu menggunakan position “absolute” dan “transform”. Hanya style-nya saja yang diubah sedikit, jadi seperti ini:
Contoh: HTML CSS Preview
|