Posisikan Gambar Atau Div Ditengah Postingan Gunakan Margin (100% Work)

Mengatur posisi gambar atau iklan supaya 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 banyak sekali instruksi perintah lainnya ibarat <center>, position:absolute dan lain-lain tidak ada yang berhasil. Tetap saja iklan berada pada sebelah kiri pada halaman postingan. Hal itu menciptakan admin putus asa sehingga pengaturan yang akan dilakukan ditunda terlebih dahulu.

Namun Alhamdulillah sudah sekian usang admin mencoba searching kembali wacana cara penulisan instruksi margin pada css yang benar itu ibarat apa.

margin: vertical horizontal      

margin: top horizontal bottom

margin: top right bottom left   

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

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 supaya 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 yaitu 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 ibarat apa posisi Gambar Iklan yang diinginkan yaitu sebagai berikut,

Untuk mendapat posisi Gambar iklan sempurna ada ditengah-tengah HALAMAN POST secara horizontal adalah,

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

Margin: Vertical     Horizontal

Margin:       A                 B       

Margin:       0             30.46%  

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

Semoga bermanfaat

Terimakasih telah berkunjung di https://agungpanduan.blogspot.co.id

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.