CARA MENGATUR POSISI TEXT PADA CSS

Menata posisi teks dalam web design adalah hal yang bisa mengubah seluruh tampilan dan nuansa halaman webmu. CSS, atau Cascading Style Sheets, adalah bahasa pemrograman yang digunakan untuk mengontrol tampilan dokumen HTML, termasuk posisi teks. Berikut ini langkah-langkah cara mengatur posisi teks pada CSS.

Menggunakan Properti text-align

Properti text-align adalah cara paling sederhana untuk mengubah posisi teks. Berikut ini beberapa nilai yang bisa kamu gunakan:

• left: Menyelaraskan teks ke kiri.
• right: Menyelaraskan teks ke kanan.
• center: Menengahkan teks.
• justify: Membuat teks rata kanan kiri.

Contohnya :

p {
  text-align: center;
}

Dalam contoh di atas, semua paragraf (p) akan ditengahkan.

Menggunakan Properti vertical-align

Properti vertical-align digunakan untuk menentukan posisi teks secara vertikal dan biasanya digunakan bersamaan dengan elemen table atau inline. Nilai yang bisa digunakan antara lain:

• top: Menyelaraskan teks ke atas.
• middle: Menyelaraskan teks ke tengah secara vertikal.
• bottom: Menyelaraskan teks ke bawah.

Contohnya :

td {
  vertical-align: top;
}

Pada contoh di atas, semua teks dalam tabel (td) akan diselaraskan ke atas.

Menggunakan Positioning dan Floats

Untuk lebih fleksibilitas dalam menata posisi teks, kamu juga bisa menggunakan teknik positioning dan floats. Teknik ini memungkinkan kamu untuk menempatkan elemen teks dimanapun di halaman, bukan hanya sejajar dengan elemen lainnya.

Teknik Positioning

Dalam CSS, ada empat jenis positioning: static, relative, absolute, dan fixed. Setiap jenis positioning memiliki kegunaan dan kesulitan masing-masing, sehingga kamu harus memahami bagaimana mereka bekerja sebelum menggunakannya.

Teknik Floats

Float adalah teknik lain yang bisa kamu gunakan untuk mengatur posisi teks pada CSS. Teknik ini memungkinkan elemen untuk ‘mengambang’ ke sisi kiri atau kanan area kontennya, yang berarti elemen lain akan mengalir di sekitarnya. Nilai yang bisa digunakan adalah left, right, dan none.

Contohnya :

p {
  float: right;
}

Pada contoh di atas, paragraf akan ‘mengambang’ ke kanan.

Itulah cara mengatur posisi teks pada CSS. Dengan memahami dan menguasai teknik-teknik tersebut, kamu bisa lebih leluasa dalam desain halaman webmu. Hal terpenting adalah terus berlatih dan bereksperimen untuk mendapatkan tampilan yang diinginkan.