Căn giữa chữ trong HTML: text-align, căn giữa dọc, thụt lề

Cách căn giữa chữ trong HTML

Dùng thuộc tính CSS text-align: center trên phần tử chứa chữ:

<!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 căn giữa mọi dòng bên trong phần tử, kể cả những thứ inline như link, ảnh và nút. Thuộc tính này được kế thừa, nên đặt nó trên một khung chứa sẽ căn giữa chữ ở mọi thứ bên trong.

Đặt trên khối, không phải trên span

text-align hoạt động trên các khối chứa: <p>, <div>, tiêu đề, ô bảng. Trên <span> hay <a> nó không làm gì cả, vì phần tử inline chỉ rộng bằng chữ của nó và không còn khoảng trống để căn giữa:

<!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>

Cách sửa luôn giống nhau: chuyển text-align: center lên khối cha.

Căn giữa khối, căn các dòng về đầu

Với đoạn văn nhiều dòng, chữ căn giữa hoàn toàn rất khó đọc vì mỗi dòng bắt đầu ở một chỗ khác nhau. Cách làm phổ biến là căn giữa khối trên trang và giữ chữ bên trong căn về đầu dòng:

<!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 căn giữa một khối có chiều rộng, còn text-align căn giữa các dòng bên trong nó. Căn giữa khung (bằng flexbox, grid hoặc margin) có ở trang căn giữa div.

Căn giữa chữ theo chiều dọc

text-align chỉ hoạt động theo chiều ngang. Để căn giữa chữ theo chiều dọc trong một khung, hãy biến khung đó thành 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 căn giữa theo chiều dọc, justify-content: center căn giữa theo chiều ngang, và text-align: center vẫn căn giữa các dòng so với nhau khi có nhiều dòng. Mẹo line-height chỉ dùng được cho một dòng chữ trong khung có chiều cao biết trước.

Mọi giá trị của 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>

Nên dùng start và end thay cho left và right: chúng tự đảo chiều với các ngôn ngữ viết từ phải sang trái, như khung cuối cho thấy.

Thẻ center cũ

Các trang cũ căn giữa chữ bằng <center> hoặc bằng thuộc tính align:

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

Cả hai đều đã lỗi thời. Trình duyệt vẫn hiển thị chúng để các trang cũ không bị hỏng, nhưng chúng không hợp lệ trong HTML hiện nay và trộn bố cục vào markup. Hãy dùng text-align: center trong CSS.

Thụt lề chữ

HTML không có thẻ thụt lề, và các dấu cách gõ vào sẽ bị gộp lại (xem khoảng trắng trong HTML). Thụt lề là việc của 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 gắn khoảng thụt lề với cỡ chữ, nên nó co giãn theo chữ.

Lỗi thường gặp

• text-align trên phần tử inline. Hãy đặt nó lên khối cha.
• Mong text-align căn giữa một khung. Nó căn giữa chữ và nội dung inline, không phải một khối có chiều rộng. Dùng margin-inline: auto hoặc flexbox cho khung.
• Dùng <center> hoặc align="center". Đã lỗi thời. Hãy dùng CSS.
• Căn giữa đoạn văn dài. Chỉ căn giữa tiêu đề và dòng ngắn; giữ phần nội dung căn về đầu dòng.
• Thụt lề bằng   hay dấu cách. Hãy dùng text-indent hoặc padding.