Image on Center of Position-Cara Buat Gambar Center (di Tengah)

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:

<img style="display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVC4JbdRA8Cngqs8fr6GDqUZLNXZjInON26C7mT9RDyzmr-o3avQnwTUedyR0HgHJ-FC5djndpGKsUj_yIJ6Ffcklr027sLYBMENMrgQBGBd0JTOccAKp0X3qmn5V9kG5333aZk9kZnE/s320/Pantai-1.jpg" />

Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.

Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position

Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. Sampeyan bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik. Silahkan buka link DEMO di bawah ini:

D E M O

Kode CSS dan xHTML

<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
}
</style>

<img class="imgcenter" src="http://..../..../images.jpg" />

Fungsi margin pada kode CSS di atas selain untuk membuat "center of position", juga berfungsi untuk mengatur jarak dengan elemen di atas dan bawahnya. Sampeyan bisa mengganti 0 auto dengan yang lain seperti misalnya 10px auto (jarak dengan elemen di atas dan bawahnya 10px) atau bentuk yang lain seperti 2em auto (jarak dengan elemen di atas dan bawahnya 2em --> 1em=18px). Apabila margin-top dan margin-bottom (jarak atas dan bawah) ingin dibuat dalam ukuran berbeda, maka bisa menambahkan kode baru seperti di bawah ini :

<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
      margin-top: 0;
      margin-bottom: 20px;
}
</style>

Dengan penambahan margin baru seperti di atas, maka jarak dengan element di atasnya sebesar 0px sedang dengan elemen di bawahnya 20px. Satu hal yang amat penting diperhatikan, mungkin pada beberapa kasus dibutuhkan tambahan kode clear: both. Penggunaan kode ini harus kita lakukan saat di atas gambar ada elemen lain yang menggunakan kode float-left atau float-right. Silahkan segera buka DEMO yang telah disertai juga beberapa contoh penggunaan kode CSS pelengkap "fungsi center" berikut penggunaan clear: both;. Simpan kode CSS di template sampeyan (di atas kode ]]></b:skin>). Jangan lupa saat menyimpan kode untuk membuang tag "style" yang berupa <style type="text/css"> dan </style>.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «