center

trik membuat object ditengah pada position absolute

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Startup Framework (Image)

untuk kali ini saya akan membahas tentang bagaimana cara membuat object ditengah pada position absolute. biasanya orang bingung dengan object yang punya position absolute karena position absolute itu akan floted berdasarkan  pembungkusnya yang punya position relative.

untuk lebih jelasnya mari kita peraktek.

  • Tag HTML
<html>
<head>
 <title></title>
</head>
<body>
   <div class="container">
      <img src="http://lorempixel.com/400/200/" alt="lorempixel">
   </div>
</body>
</html>
  • Css
.container { 
   position: relative;
   min-height: 20em;
   background-color: #eee;
}
.container img {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -200px;
}

 

Penjelasan:
pada class container memiliki position relative sebagai pembungkus class object yang memiliki position absolute itu dikarenakan biar object yang punya position absolute akan floated didalam class container sebagai pembungkus.

sekarang untuk membuat object menjadi ditengah, image memiliki width:400px dan height:200px dan position absolute. untuk membuat objectnya berada ditengah berikan top 50%, left 50%; selanjutnya untuk menentukan position nya beri margin-top -100px, dan margin-left -200px, width object di bagi dua

untuk menentukan left:
400/2= 200

untuk menentukan top:
200/2=100

jangan lupa untuk memberi nilai negatif untuk menentukan margin.

Hasil:

See the Pen Absolutely Center by ihsan (@ihsanatkia) on CodePen.


ada banyak cara untuk membuat object berada ditengah namun saya hanya membahas dengan cara saya sendiri.

sekian pembahasan kali ini semoga bermanfaat.

 

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.