Skip to content

Pesona Informatika

Belajar programming, tech tips, dan catatan teknik informatika

Menu
  • Home
  • Android
  • Programming
    • Belajar Python
    • Belajar c++
    • Kumpulan contoh program Java
    • Belajar CSS Pemula Dari Awal
    • Belajar JavaScript
    • Belajar ReactJS
  • Operating System
  • Tips&Trick
  • Other Notes
Menu

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

Akhi Syabab
Akhi Syabab

Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency

Like our page, please… :D

Pesonainformatika

Sebuah site  untuk menyimpan dan dokumentasi apapun yang kami pelajari yang berhubungan dengan teknologi komputer khususnya pemrograman dan tentang perkuliahan.

©2023 Pesona Informatika | Design: Newspaperly WordPress Theme
Go to mobile version