Site icon Pesona Informatika

Belajar CSS (18. Align)

Akhi Syabab

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>


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>

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>

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

Exit mobile version