Cara Menggunakan Fungsi Text-align pada CSS

Hallo teman-teman, kali ini kita akan belajar bagaimana cara menggunakan fungsi text-align pada CSS. Fungsi text-align itu sendiri adalah mengatur posisi text. Jika kalian buka ms.word ada fitur untuk mengatur posisi text menjadi rata kanan, kiri , tengah dan justify. Kira-kira fungsinya kurang lebih sama seperti yang ada di ms.word. Fungsi text-align ini bisa kalian gunakan untuk mengatur text pada html. Cara penggunaannya pun sangat mudah, untuk prakteknya kalian bisa ikut contoh code dibawah ini.

text.html

<!DOCTYPE html>
<html>
<head>
<style>
.left {
	width:300px;
    text-align: left;
}

.right {
	width:300px;
    text-align: right;
}

.center {
	width:300px;
    text-align: center;
}

.justify {
	width:300px;
    text-align: justify;
}

</style>
</head>
<body>


<div class="left">
<h1>Kiri</h1>
<p>Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-alignTest text dengan css text-align.Test text dengan css text-align</p>
</div>

<div class="right">
<h1>Kanan</h1>
<p>Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-alignTest text dengan css text-align.Test text dengan css text-align</p>
</div>

<div class="center">
<h1>Tengah</h1>
<p>Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-alignTest text dengan css text-align.Test text dengan css text-align</p>
</div>

<div class="justify">
<h1>Rata kanan kiri (Justify)</h1>
<p>Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-align.Test text dengan css text-alignTest text dengan css text-align.Test text dengan css text-align</p>
</div>

</body>
</html>

Maka hasilnya seperti ini.

Maka hasil dari fungsi text align bisa dilihat pada gambar diatas.

Sekian pembahasan mengenai cara menggunakan fungsi text-align pada CSS. Semoga bermanfaat.