CSS text-align: Căn chỉnh văn bản ngang

Sử dụng thuộc tính CSS text-align chúng ta có thể căn chỉnh ngang văn bản của một phần tử. Có thể thiết lập: left, right, center, justify.

Cú pháp

selector {
    text-align: left | right | center | justify | start | end | match-parent;
}

Các giá trị

Giá trị	Mô tả
`left`	Căn trái (mặc định cho LTR)
`right`	Căn phải
`center`	Căn giữa
`justify`	Căn đều hai bên (khoảng cách từ điều chỉnh)
`start`	Căn đầu dòng (tùy direction: ltr/rtl)
`end`	Căn cuối dòng
`match-parent`	Kế thừa từ parent, xử lý direction

Ví dụ 1: Căn chỉnh các div con

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    padding: 8px;
    max-width: 200px;
    border: thin solid;
}
p { text-align: right; }
div:nth-child(3) { text-align: center; }
div:last-child { text-align: justify; }
</style>
</head>
<body>
<h2>Student Examination Details</h2>
<div>
    <div>Student John</div>
    <div> Student Tom <p>Did not appeared for the exams.</p> </div>
    <div>Student Brad</div>
    <div>Did not appeared for only the last exam.</div>
</div>
</body>
</html>

Ví dụ 2: Căn phải cho ô bảng đầu tiên

<!DOCTYPE html>
<html>
<head>
<style>
td {
    padding: 10px;
    box-shadow: inset 0 0 21px yellow;
}
td:first-of-type {
    text-align: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table>
    <tr><td>This is it!</td></tr>
    <tr><td>Well, this is a demo text!</td></tr>
</table>
</body>
</html>

Lưu ý quan trọng

text-align chỉ ảnh hưởng đến inline/inline-block content bên trong, không căn chính phần tử block đó
Để căn giữa phần tử block: dùng margin: 0 auto (cần width) hoặc Flexbox/Grid
justify có thể tạo khoảng cách từ lớn giữa các từ — cân nhắc dùng text-justify: inter-word hoặc hyphens: auto
start/end hỗ trợ tốt cho đa ngôn ngữ (RTL như Arabic, Hebrew)

Căn giữa hiện đại (Flexbox)

.center-both {
    display: flex;
    justify-content: center; /* ngang */
    align-items: center;     /* dọc */
    min-height: 100vh;
}