Apa itu text align pada CSS?

Text alignment pada CSS merupakan properti yang digunakan untuk mengatur perataan teks dengan arah horisontal. Text alignment berlaku untuk semua elemen HTML pada level blok.

Table of Contents Show

Cara Mengatur Perataan Teks Pada Suatu Paragraf
Dukungan Browser
Nilai properti
Direction Text
Vertical Alignment
Apa itu text align CSS?
Apa itu text align pada HTML?
Text align apa saja?
Apa fungsi dari text alignment?

Perataan teks pada suatu paragraf memiliki beberapa nilai tergantung dari segi keperluan. Pada paragraf normal, biasanya menggunakan nilai perataan teks rata kiri. Rata kiri akan membuat teks yang berada pada posisi sebelah kiri menjadi rata.

Namun nilai rata kiri akan membuat teks pada sisi sebelah kanannya menjadi kurang rapi. Nilai perataan rata kanan - kiri menjadi pilihan untuk mendapatkan perataan pada kedua sisi teks suatu paragraf. Nilai perataan rata kanan membuat teks memiliki kerataan pada sisi kanan saja.

Nilai teks dengan perataan tengah sangat cocok digunakan pada bagian judul, sub judul, dan juga header. Nilai tersebut akan membuat posisi teks berada pada tengah halaman atau paragraf.

Cara Mengatur Perataan Teks Pada Suatu Paragraf

Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya.

text-align: left | right | center | justify | inherit;

Properti dengan nilai left artinya teks akan diatur dengan rata kiri. Nilai right artinya teks akan diatur dengan rata kanan. Nilai center artinya teks akan diatur dengan rata tengah. Nilai justify artinya teks akan diatur dengan rata kanan - kiri. Dan nilai inherit artinya artinya teks akan diatur sesuai dengan perataan teks pada elemen induknya.

nilai default:left if direction is ltr, and right if direction is rtlmewarisi:yesanimatable:no. Read about animatableVersi:CSS1sintaks JavaScript:object .style.textAlign="right" Try it

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Miliktext-align1.03.01.01.03.5

CSS Syntax

Nilai properti

NilaiDeskripsiMainkanleftSejalan teks ke kiriMainkan "rightSejalan teks ke kananMainkan "centerPusat teksMainkan "justifyMembentang garis sehingga setiap baris memiliki lebar yang sama (seperti di koran dan majalah)Mainkan "initialSet properti ini ke nilai default. Baca tentang awalMainkan "inheritMewarisi properti ini dari elemen induknya. Baca tentang mewarisi

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.

Apa itu text align 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.

Apa itu text align pada HTML?

Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya.

Text align apa saja?

Text Align Ada rata kiri, rata kanan, rata tengah, rata kiri dan kanan. Nah, kita juga bisa meratakan teks dengan properti CSS text-align .

Apa fungsi dari text alignment?

Dalam sebuah dokumen, fungsi alignment yaitu untuk perataan teks atau mengatur posisi teks. Sehingga dokumen yang Kamu buat menjadi lebih rapi dan juga teratur.