Thiết lập căn lề văn bản (Text Alignment) bằng CSS

Để thiết lập căn lề văn bản bằng CSS, sử dụng thuộc tính text-align.

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

Ví dụ 1: justify kết hợp columns

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  columns: auto auto;
  text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
  Trí tuệ nhân tạo (AI) ngày nay đã vượt xa hype của blockchain và quantum computing. 
  Điều này do nguồn tính toán khổng lồ dễ dàng tiếp cận cho người phổ thông. 
  Các developer tận dụng điều này để tạo mô hình Machine Learning mới và re-train 
  mô hình hiện có cho hiệu năng và kết quả tốt hơn. 
  Sự dễ dàng tiếp cận High Performance Computing (HPC) đã làm tăng đột biến 
  nhu cầu chuyên gia IT có kỹ năng Machine Learning.
</div>
</body>
</html>

Kết quả

Ví dụ 2: center với gradient nền

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-variant: normal;
  text-align: center;
}
</style>
</head>
<body>
<h1>Chi tiết kỳ thi</h1>
<p class="demo">Kỳ thi ngày 20 tháng 12.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Giải thích:

• left: Căn trái (mặc định LTR)
• right: Căn phải
• center: Căn giữa
• justify: Căn đều hai bên (kéo giãn khoảng cách từ)
• start/end: Tùy hướng viết (hỗ trợ RTL)