Teks Rata Tengah HTML: text-align, Vertikal dan Indentasi

Cara membuat teks rata tengah di HTML

Pakai property CSS text-align: center di elemen yang berisi teksnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align menengahkan setiap baris di dalam elemen, termasuk konten inline seperti link, gambar, dan tombol. Property ini diwariskan, jadi mengaturnya di sebuah container akan menengahkan teks di semua elemen di dalamnya.

Taruh di blok, bukan di span

text-align bekerja di container blok: <p>, <div>, heading, sel tabel. Di <span> atau <a> property ini tidak berpengaruh, karena elemen inline hanya selebar teksnya dan tidak ada ruang untuk menengahkan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

Perbaikannya selalu sama: pindahkan text-align: center ke blok induknya.

Blok di tengah, baris rata awal

Untuk paragraf yang terdiri dari beberapa baris, teks yang sepenuhnya rata tengah sulit dibaca karena setiap baris dimulai di tempat yang berbeda. Pola yang umum adalah menengahkan blok-nya di halaman dan membiarkan teksnya rata ke awal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto menengahkan blok yang punya lebar, text-align menengahkan baris di dalamnya. Menengahkan kotak (dengan flexbox, grid, atau margin) dibahas di halaman menengahkan div.

Menengahkan teks secara vertikal

text-align hanya bekerja secara horizontal. Untuk menengahkan teks secara vertikal di dalam kotak, jadikan kotaknya flex container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center menengahkan secara vertikal, justify-content: center menengahkan secara horizontal, dan text-align: center tetap menengahkan baris-baris teks satu sama lain saat ada beberapa baris. Trik line-height hanya berlaku untuk satu baris teks di kotak yang tingginya sudah diketahui.

Semua nilai text-align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Pilih start dan end daripada left dan right: keduanya otomatis terbalik untuk bahasa yang ditulis dari kanan ke kiri, seperti yang ditunjukkan kotak terakhir.

Tag center yang lama

Halaman lama menengahkan teks dengan <center> atau dengan atribut align:

<center>Old way</center>
<p align="center">Also old</p>

Keduanya sudah usang. Browser masih menampilkannya supaya situs lama tidak rusak, tapi keduanya tidak valid di HTML saat ini dan mencampur tata letak ke dalam markup. Pakai text-align: center di CSS.

Indentasi teks

HTML tidak punya tag indentasi, dan spasi yang diketik akan diringkas (lihat spasi di HTML). Indentasi dibuat dengan CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

em mengikat indentasi ke ukuran font, jadi ukurannya ikut berubah bersama teks.

Kesalahan umum

• text-align di elemen inline. Taruh di blok induknya.
• Berharap text-align menengahkan sebuah kotak. Property ini menengahkan teks dan konten inline, bukan blok yang punya lebar. Pakai margin-inline: auto atau flexbox untuk kotak.
• Memakai <center> atau align="center". Sudah usang. Pakai CSS.
• Menengahkan paragraf panjang. Tengahkan heading dan baris pendek; biarkan teks isi rata ke awal.
• Membuat indentasi dengan   atau spasi. Pakai text-indent atau padding.