Menempatkan Gambar Di Tengah Layar Monitor

Mawan A. Nugroho, 30 Sep 2012 20:05:55 WIB

Banyak disainer web / programmer web pemula bertanya kepada saya, "Bagaimana cara menempatkan gambar agar berada di tengah-tengah layar monitor?" Jawabannya: Gunakan CSS. Yang harus anda lakukan adalah menghitung ukuran gambar tersebut (lebar dan tinggi) lalu dibagi dua. Hasil pembagian jadikan parameter untuk margin-left dan margin top. Untuk lebih jelasnya, silakan lihat contoh berikut ini.

<html>
<head>
<title>Under construction</title>
</head>

<body bgcolor="black">
<div style="position:fixed; top:50%; left:50%; margin-top: -163; margin-left:-320">
<img src="under-construction.jpg" width="640" height="327" border="0" />
</div>
</body>

</html>


Hasilnya dapat dilihat di sini.

Mungkin anda juga bertanya, "Bagaimana jika gambarnya di kanan bawah? Mudah saja. Ini dia...!!!

<html>
<head>
<title>Under Construction</title>
<style type="text/css">
body
{
background-image:url('under-white.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
</style>
</head>

<body>
<p>Maaf, situs web ini sedang dalam tahap pembangunan.</p>
</body>

</html>

Share on:
Facebook


Belum ada komentar untuk artikel ini.

Tambah komentar singkat.

Perhatikan!

  1. Komentar anda baru dapat dilihat oleh umum setelah mendapat persetujuan dari Administrator.
  2. Untuk membendung serbuan spam, satu orang hanya boleh mengirimkan 5 komentar perhari. Jumlah komentar anda hari ini: 0 komentar.
  3. Nama ibukota negara kita adalah nama kota yang terletak di antara kota Tangerang dan Bekasi, tujuh karakter.

Pay attention please!

  1. Your comment will be visible to the public after the approval of the Administrator.
  2. To stem the invasion of spams, one person may only submit 5 comments per day. The number of your comments today: 0 comment(s).
  3. Do not waste your time by trying to send spam. I guarantee your efforts will be futile. Okay... Suppose you could probably pass a CAPTCHA test, but you will not be able to pass a special test of us. Trust me!

Nama*:
Email: (akan dirahasiakan)
Komentar*:
Verifikasi*:Ketik dua kata yang meleyot-leyot di bawah ini ke dalam kotak kecil yang sudah disediakan di bawahnya.
  Nama ibukota negara kita*:
  * = Wajib diisi.
Administrator

Username:

Password:

All efforts to enter into this website are logged.
Unique Visitors
0929320
sejak 26 Mei 2010.

Atau rata-rata sekitar 297 pengunjung perhari.

IP addr anda:
54.82.10.219
Facebook
Mawan A. Nugroho

Promote Your Page Too
Mawan's Net

MbahDukun.com
SMK Negeri 1 Tng
SMK PGRI 1 Tng
PGRI.org
Tangerang.net
Mawan.net
Mawan.id
Mawan.my.id
Mawan.or.id
Mawan.web.id
SingleWoles.com
Balekota.com

MKom UBL 10

Blog
Mailing List

© 2010-2018 by Mawan A. Nugroho. All rights reserved.