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,