membuat object berada ditengah secara vertical dan horizontal

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

setelah kemaren saya membahas trik untuk membuat object berada ditengah pada position absolute kini saya bahas membuat object berada ditengah secara vertical dan horizontal. untuk membuatnya lebih gampang dari pada yang absolute karena dalam pembahasan yang kemarin kita membuat object ditengah pada pembungkus yang memiliki width dan height, sekarang object berada ditengah tanpa pembungkus.
ok kita langsung aza peraktek !

  • Html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>latihan</title>
	<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>

	<div class="object">object</div>

</body>
</html>
  • Css
/* CSS */
body{
	margin: 0;
	background-color: red;
}

.object{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: yellow;
	text-align: center;

	left:50%;
	top: 50%;

	margin-left: -50px;
	margin-top: -50px;
}
  • Penjelasan

Untuk membuat object berada ditengah secara vertical dan horizontal tanpa pembungkus intinya pada class object, yang punya width:100px dan height:100px kita beri left dan topnya 50%, kemudian untuk mendorong object supaya berada tetap ditengah kita tambahkan margin-left:-50px; dan margin-top:-50px biar berada tetap ditengah meskipun pada ukuran layar berapapun.

untuk mendapatkan margin-left:-50px dan margin-top:-50px adalah width/2, hasilnya beri nilai min (-) begitupun heightnya hight/2, hasilnya diberi nilai min (-).

margin-left: -{width/2}px;
margin-top: -{height/2}px;
  • Hasil

object-center-horizontal

perbedaan dengan materi sebelumnya adalah pada materi kemaren kita membuat object ditengah pada div atau pembungkus yang memiliki ukuran width dan height, sedangkan materi sekarang membuat object ditengah tanpa pembungkus.

Sekian semoga bermanfaat.

  • Download Code

Download

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.