Belajar CSS (18. Align)

Posted on

Align Dalam CSS

Kali ini kita akan belajar tentang align. Apa itu align? arti dari align adalah meluruskan atau rata, intinya kita akan membuat tampilan yang kita buat rata kanan, rata tengah, atau rata kiri. Berarti kita menyetting bagian horizontalnya.

Menyetting align sendiri dapat dilakukan dengan beberapa cara yaitu menggunakan properti margin, position, dan float. Untuk position dan float, lebih detailnya anda bisa lihat postingan sebelumnya yang telah kami buat.

ex
Menggunakan properti margin

<!DOCTYPE html>
<html>
<head>
	<style>
		.center {
		    margin: auto;
		    width: 60%;
		    border: 3px solid #73AD21;
		    padding: 10px;
		}
	</style>
</head>
<body>
	<div class="center">
	  	<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
	</div>
</body>
</html>

hasil
menggunakan properti position


<!DOCTYPE html>
<html>
<head>
	<style>
		.right {
		    position: absolute;
		    right: 0px;
		    width: 300px;
		    border: 3px solid #73AD21;
		    padding: 10px;
		}
	</style>
</head>
<body>
	<div class="right">
	  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
	</div>

</body>
</html>

hasil

menggunakan properti float

<!DOCTYPE html>
<html>
<head>
	<style>
		.right {
		    float: right;
		    width: 300px;
		    border: 3px solid #73AD21;
		    padding: 10px;
		}
	</style>
</head>
<body>
	<div class="right">
	  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.
Written by @akhi_syabab