Setiap blok teks di halaman menempati lebar tertentu, dan text-align menentukan bagaimana baris-barisnya disejajarkan di dalam ruang tersebut. Properti ini berlaku pada elemen blok dan diterapkan pada seluruh baris di dalamnya, bukan hanya baris pertama. Pemilihan perataan yang tepat membantu pembaca mengenali struktur: judul di tengah, teks isi rata kiri, angka tabel rata kanan. Kita bahas keempat nilai utamanya, dua nilai yang berbasis arah baca, lalu properti pendamping text-align-last.

Empat Nilai Utama text-align #

Nilai left, center, right, dan justify adalah nilai yang paling sering dipakai. Tiga nilai pertama menyebut sisi perataan secara langsung: teks menempel kiri, di tengah, atau kanan wadahnya. Nilai justify berbeda cara kerjanya — browser meregangkan jarak antarkata pada setiap baris sehingga tepi kiri dan kanan sama rata, kecuali baris terakhir yang tetap rata kiri.

Selain itu tersedia start dan end, dua nilai yang mengikuti arah baca dokumen. Pada teks berbahasa Indonesia (kiri ke kanan), start perilakunya sama dengan left dan end sama dengan right; bedanya muncul pada bahasa yang ditulis kanan ke kiri seperti Arab. Nilai default text-align adalah start, itulah sebabnya teks tampil rata kiri secara bawaan. Untuk halaman berbahasa Indonesia, left/start adalah pilihan yang sama amannya.

Satu penjelasan kecil yang sering ditanyakan pemula: text-align mengatur seluruh konten sebaris (inline content) di dalam elemen blok, bukan hanya teks. Gambar yang berdiri sendiri di dalam paragraf, misalnya, ikut diratakan oleh text-align: center karena gambar berperilaku sebaris secara bawaan.

Perataan justify perlu dipertimbangkan dengan hati-hati. Pada bahasa Indonesia yang katanya panjang-panjang, browser hanya bisa meregangkan spasi antarkata, sehingga beberapa baris bisa memiliki celah spasi yang tidak rata. Bila ingin memakai justify untuk artikel panjang, dampingi dengan hyphens: auto agar kata boleh dipenggal — kombinasi ini kita lihat pada Chapter Text Wrapping.

Dua sifat lain membantu saat menyusun komponen. Pertama, text-align diwariskan: mengaturnya pada wadah kartu berlaku untuk seluruh teks di dalamnya, dan elemen yang butuh berbeda cukup menimpanya sendiri. Kedua, nilai start dan end membuat komponen siap untuk konten multibahasa — kartu yang diratakan start otomatis menyesuaikan diri bila kontennya dialihkan ke bahasa yang ditulis dari kanan, tanpa satu baris CSS pun berubah. Untuk halaman berbahasa Indonesia saja, left dan start menghasilkan tampilan yang sama.

text-align-last untuk Baris Terakhir #

Properti text-align-last mengatur perataan baris terakhir sebuah blok — baris yang biasanya dikeluarkan dari aturan justify. Nilainya mengikuti daftar yang sama dengan text-align. Kasus pemakaiannya jarang, tetapi berguna untuk gaya editorial tertentu, misalnya membuat baris terakhir paragraf tersusun di tengah.

css 
.judul {
  text-align: center;
}
.angka-tabel {
  text-align: right;
}
.terakhir-tengah {
  text-align-last: center;
}

Mari kita telaah baris demi baris:

  1. Baris 1–3 (.judul): seluruh baris judul disusun di tengah wadah; computed value yang tercatat adalah kata center apa adanya.
  2. Baris 4–6 (.angka-tabel): teks diratakan kanan, pola standar untuk kolom angka agar digit satuan berbaris lurus.
  3. Baris 7–9 (.terakhir-tengah): hanya baris terakhir blok yang ikut aturan ini; baris sebelumnya tetap mengikuti text-align.

Hasil di Browser:

text 
Lima baris demo tampil dengan lima perataan berbeda: rata kiri,
tengah, kanan, justify (tepi kiri-kanan sama rata), dan baris
terakhir di tengah. Nilai computed text-align masing-masing
tercatat "left", "center", "right", "justify", dan properti
text-align-last tercatat "center".

Perhatikan satu kebiasaan penulisan yang sering keliru: text-align: center mengatur teks, bukan kotaknya. Ketika sebuah tombol terasa “tidak mau di tengah”, pastikan kita sedang menyasar elemen yang benar — properti teks untuk isinya, properti layout untuk kotaknya. Dari perataan horizontal ini, kita lanjut ke garis hias pada teks lewat Text Decoration .