Bagaimana menyelaraskan teks pada halaman web dalam HTML atau CSS
Teks apa pun bisa diratakan ke kiri, tengah, atau kanan pada halaman web. Gambar juga dapat disejajarkan di halaman web dengan cara yang sama seperti teks. Di bawah ini adalah contoh bagaimana teks dan gambar meratakan kiri, tab, tengah, dan kanan.
Jika salah satu perataan teks Anda tidak berfungsi, pastikan gaya CSS lain yang diterapkan ke elemen, atau elemen penampung, tidak bertentangan dengan justifikasi yang Anda coba setel.
Dengan contoh dan sebagian besar perataan ini, teks diratakan dalam elemen yang berisi teks. Teks dapat dipusatkan di div HTML dan rata kiri di seluruh halaman web. Selain itu, apa pun yang ada dalam tag yang berisi justifikasi CSS (misalnya, gambar) juga selaras.
Contoh perataan
Rata kiri
Tab rata
Rata tengah
Rata kanan
Contoh rata kiri
Secara default, bahasa Inggris dan bahasa lain meratakan teks ke kiri. Namun, jika Anda perlu mengubah perataan elemen, kode di bawah ini dapat ditambahkan ke elemen atau ke CSS.
Kode HTML
Left-aligned
Lihat tip tambahan di bawah ini untuk menyesuaikan perataan, padding, dan margin elemen.
Contoh rata tab
Meskipun tidak ada perataan teks “tab”, menambahkan margin kiri akan memberikan tampilan perataan tab, seperti yang ditunjukkan di bawah ini.
Kode HTML
Tab aligned
Lihat tip tambahan di bawah ini untuk menyesuaikan perataan, padding, dan margin elemen.
Contoh rata tengah
Dengan menggunakan atribut text-align, Anda dapat memusatkan teks atau gambar apa pun dalam sebuah elemen, seperti yang ditunjukkan pada contoh di bawah ini.
Kode HTML
Center-aligned
Lihat tip tambahan di bawah ini untuk menyesuaikan perataan, padding, dan margin elemen.
Contoh rata kanan
Dengan menggunakan atribut text-align, Anda dapat memusatkan teks atau gambar apa pun dalam sebuah elemen, seperti yang ditunjukkan pada contoh di bawah ini.
Kode HTML
Right-aligned
Sebagai alternatif, Anda dapat menggunakan CSS untuk meratakan gambar di halaman web. Untuk informasi lebih lanjut, lihat: Cara membuat gambar yang rata kanan pada halaman web.
Lihat tip tambahan di bawah ini untuk menyesuaikan perataan, padding, dan margin elemen.
Tip perataan tambahan
Di bawah ini adalah tip penyelarasan tambahan yang dapat diterapkan ke salah satu aturan gaya di atas atau kelas CSS lainnya.
- Margin tambahan dapat ditambahkan ke salah satu gaya di atas jika Anda memerlukan lekukan tambahan atau ingin lebih banyak padding. Misalnya, Anda dapat menerapkan margin-right ke contoh rata kanan untuk memindahkan teks lebih jauh ke dalam elemen.
- Jika Anda menginginkan halaman yang lebih responsif, pastikan untuk menyesuaikan atau menghapus pembenaran kiri atau kanan saat dilihat di layar yang lebih kecil.