AGUNG TUTORIAL

Belajar Bordir Wilcom dan Tajima Mesin SWF, VBA Macro Excel, Design Grafis CorelDraws, Video Editing, Download Software-software, Solusi Masalah Error Komputer, Jaringan dan Internet, Analisis Jaringan, Analisis Problem Hardware dan sebagainya

11/15/2018

POSISIKAN GAMBAR ATAU DIV DITENGAH POSTINGAN GUNAKAN MARGIN (100% WORK)

Mengatur posisi gambar atau iklan agar tetap ditengah secara horizontal sering kali sulit dilakukan apabila tidak memahami fungsi margin pada css. Hal ini pun pernah terjadi pada blog admin. Pernah mencoba berbagai kode perintah lainnya seperti <center>, position:absolute dan lain-lain tidak ada yang berhasil. Tetap saja iklan berada pada sebelah kiri pada halaman postingan. Hal itu membuat admin frustasi sehingga pengaturan yang akan dilakukan ditunda terlebih dahulu.



Namun Alhamdulillah sudah sekian lama admin mencoba searching kembali tentang cara penulisan kode margin pada css yang benar itu seperti apa.

margin: vertical horizontal      
margin: top horizontal bottom
margin: top right bottom left   

Dalam penulisan margin dapat diisi berupa angka tanpa satuan, angka dengan satuan. Maksud dari satuan ini seperti px(pixel) atau % (percent) serta dapat diberikan angka negatif.  Yang akan kita bahas dari ke tiga tatacara penulisan margin css adalah

margin: verical horizontal
margin: Apx Bpx               

Misalkan A, dan B merupakan nilai konstanta yang akan diisi oleh angka pixel. Diketahui ada sebuah kotak halaman Postingan dengan lebar dimisalkan 640px dengan gambar atau iklan dengan lebar 250px. 


Pertanyaannya berapakah angka B px agar Gambar Iklan berada diposisi tengah pada halaman postingan. Untuk mengetahuinya pertama kita akan mencari nilai tengah dari lebar Halaman Post.

            Nilai tengah dari lebar Halaman Post adalah 640 px / 2= 320 px

Jika nilai 320 px diisikan ke Bpx ===รจ margin: 0px 320px maka posisi Gambar iklan akan berubah ke posisi,


Terlihat dari gambar diatas, Posisi Gambar Iklan bukanlah posisi yang diharapkan. Lalu seperti apa posisi Gambar Iklan yang diinginkan adalah sebagai berikut,



Untuk mendapatkan posisi Gambar iklan tepat ada ditengah-tengah HALAMAN POST secara horizontal adalah,


Dari perhitungan diatas didapat bahwa nilai yang dibutuhkan yang akan diisi pada kode margin css adalah 30.46%. dimana penulisannya menjadi

Margin: Vertical     Horizontal
Margin:       A                 B       
Margin:       0             30.46%  

Demikianlah cara menempatkan penulisan margin pada css agar Gambar iklan tepat ada ditengah-tengah postingan secara horizontal.

Semoga bermanfaat
Terimakasih telah berkunjung di https://www.agungpanduan.com

6 komentar:

  1. Kadang saya suka ketuker masalah vertikal dan horizontalnya. Makasih banget infonya bermanfaat sekali

    BalasHapus
  2. Ohh gitu toh ternyata, pantesan ane bikin center tetep kagak bisa..
    Makasih ya min infonya, praktekin dulu ahh

    BalasHapus
  3. Sangat bermanfaat buat pemula seperti saya hehehe

    BalasHapus
  4. Nah pas bngt gw butuh buat naro iklan

    BalasHapus