Text Alignment
Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text alignment. Pada CSS mengatur alignment seperti center, left, dan right dapat menggunakan properti text-align. Properti text-align digunakan untuk mengatur alignment teks horisontal.
Sebuah teks dapat diatur rata kiri (alignment left), rata kanan (alignment right), rata tengah (center) atau rata kanan-kiri (justifiy) untuk membuat teks terlihat lebih rapih.
Berikut ini adalah contoh yang memperlihatkan bagaimana cara mengatur teks menjadi center, alignment left, dan alignment right (alignment left menjadi default jika arah teks dari kiri-ke-kanan, dan aligment right menjadi default jika arah teks dari kanan-ke-kiri):
<!DOCTYPE html> <html> <head> <style> h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } </style> </head> <body> <h1>Heading 1 (center)</h1> <h2>Heading 2 (left)</h2> <h3>Heading 3 (right)</h3> <p>ketiga heading diatas adalah contoh penggunaan center, alignnment left dan alignment right.</p> </body> </html>
Saat properti text-align diubah menjadi “justify”, setiap baris dalam paragraf akan direntangkan sehingga setiap garis memiliki lebar yang sama, dan margin kiri dan kanan menjadi lurus (rata kanan-kiri). Penulisan seperti ini biasa digunakan pada majalah dan koran.
Contoh :
<!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; padding: 10px; width: 200px; height: 200px; text-align: justify; } </style> </head> <body> <h1>Contoh text-align: justify;</h1> <p>text-align: justify; berfungsi merentangkan garis sehingga setiap garis memiliki lebar yang sama (seperti pada koran dan majalah).</p> <div> Dimasa muda dan masa rentanku, ayah memberiku nasihat yang terus aku pikirkan sejak saat itu. "Kapanpun kamu ingin mengkritik seseorang," katanya kepadaku, "ingatlah bahwa tidak setiap orang di dunia ini memiliki kelebihan seperti yang aku miliki." </div> </body> </html>
Direction Text
Properti direction pada CSS berfungsi untuk menentukan posisi arah teks. Properti direction dan unicode-bidi dapat digunakan untuk mengubah posisi arah teks suatu elemen. Agar lebih jelas, berikut adalah contoh penggunaan direction pada CSS.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>Ini adalah default teks direction.</p>
<p class="ex1">Ini adalah arah teks dari kanan-ke-kiri.</p>
</body>
</html>
Vertical Alignment
Vertical alignment adalah cara mengatur alignment elemen vertikal pada CSS. Properti yang digunakan untuk mengatur vertical alignment adalah vertical-align. Vertical alignment terdiri dari top, middle, dan bottom.
Contoh dibawah ini menunjukkan cara mengatur vertical alignment pada sebuah gambar dalam teks:
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>Ini <img src="https://dosenit.com/wp-content/uploads/2019/03/dosen-ti.png" alt="DosenIT" width="270" height="50"> gambar dengan default alignment.</p><br>
<p>Ini <img class="top" src="https://dosenit.com/wp-content/uploads/2019/03/dosen-ti.png" alt="DosenIT" width="270" height="50"> gambar dengan top (atas) alignment.</p><br>
<p>Ini <img class="middle" src="https://dosenit.com/wp-content/uploads/2019/03/dosen-ti.png" alt="DosenTI" width="270" height="50"> gambar dengan middle (tengah) alignment.</p><br>
<p>Ini <img class="bottom" src="https://dosenit.com/wp-content/uploads/2019/03/dosen-ti.png" alt="Dosen-IT" width="270" height="50"> gambar dengan bottom (bawah) alignment.</p>
</body>
</html>
Sekian bahasan dan contoh penggunaan text alignment pada CSS, semoga bermanfaat.
