Thuộc tính text-align trong CSS
Trần Thị Vân - 1490
- 12/07/2025
Chức năng của Thuộc tính text-align trong CSS
Thuộc tính text-align trong CSS dùng để canh lề cho văn bản, bạn có thể canh lề trái, lề phải, canh đều 2 bên, canh giữa cho văn bản.
Cú pháp của Thuộc tính text-align trong CSS
text-align: giatri;
giatri: Giá trị để canh lề cho văn bản, bạn có thể canh lề trái, lề phải, canh đều 2 bên, canh giữa cho văn bản (Ví dụ: left, right, justify, center, end, start,.... )
Các giá trị của Thuộc tính text-align trong CSS
left: Canh lề trái.
right: Canh lề phải.
justify: Canh đều 2 bên.
center: Canh giữa.
end: Canh lề phải.
start: Canh lề trái.
Ví dụ Thuộc tính text-align trong CSS
text-align: left; Canh lề trái
text-align: right; Canh lề phải
text-align: justify; Canh đều 2 bên
text-align: center; Canh giữa
text-align: end; Canh lề phải
text-align: start; Canh lề trái
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính text-align trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:48%; float: left; margin-right:1%; background:#ddd; margin-bottom:10px; padding:0px 20px;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính text-align trong CSS</h1>
<p>Dùng để canh lề cho văn bản, bạn có thể canh lề trái, lề phải, canh đều 2 bên, canh giữa cho văn bản:</p>
<div style="text-align: left;">
<h3>text-align: left; Canh lề trái</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: right;">
<h3>text-align: right; Canh lề phải</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: justify;">
<h3>text-align: justify; Canh đều 2 bên</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: center;">
<h3>text-align: center; Canh giữa</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: end;">
<h3>text-align: end; Canh lề phải</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: start;">
<h3>text-align: start; Canh lề trái</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: unset;">
<h3>text-align: unset;</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: revert-layer;">
<h3>text-align: revert-layer;</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: revert;">
<h3>text-align: revert;</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: initial;">
<h3>text-align: initial;</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
<div style="text-align: inherit;">
<h3>text-align: inherit;</h3>
<p>Hãy Chạy thử Ví dụ Thuộc tính text-align trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả để có cái nhìn dễ hơn khi học lập trình</p>
</div>
</body>
</html>
Ứng dụng text-align trong thiết kế giao diện thực tế
Trong quá trình xây dựng giao diện website, text-align giúp kiểm soát cách nội dung văn bản được bố trí trong vùng hiển thị. Sử dụng đúng thuộc tính này giúp tiêu đề, đoạn văn và các thành phần giao diện có bố cục rõ ràng, dễ đọc mà không cần xử lý căn chỉnh bằng các cách phức tạp.
Căn chỉnh nội dung trong tiêu đề và đoạn văn
Với tiêu đề, text-align thường được dùng để tạo điểm nhấn cho từng khu vực nội dung. Chẳng hạn, tiêu đề của một phần giới thiệu có thể căn giữa, trong khi phần nội dung mô tả bên dưới vẫn giữ kiểu căn trái để người đọc dễ theo dõi.
.title {
text-align: center;
}
.description {
text-align: left;
}
Cách kết hợp này phù hợp với nhiều giao diện website vì tiêu đề được làm nổi bật, còn phần văn bản chính vẫn giữ hướng đọc tự nhiên.
Căn giữa nội dung trong thành phần giao diện
text-align: center có thể hữu ích khi cần căn giữa nội dung dạng văn bản bên trong một thành phần như nút, ô thông báo hoặc khu vực giới thiệu. Thuộc tính này căn chỉnh nội dung theo chiều ngang trong phạm vi phần tử chứa nó.
.button {
text-align: center;
}
.notice {
text-align: center;
}
Điểm cần lưu ý là text-align chủ yếu điều chỉnh cách căn nội dung theo chiều ngang, không phải công cụ để căn giữa toàn bộ phần tử theo cả chiều ngang và chiều dọc. Khi thiết kế bố cục phức tạp, có thể cần kết hợp với các kỹ thuật CSS khác.
Khi nào nên dùng text-align: justify
text-align: justify phân bổ khoảng cách giữa các từ để các dòng văn bản có độ dài gần bằng nhau ở hai phía của vùng nội dung. Cách căn này có thể phù hợp với những đoạn văn dài, tài liệu hoặc khu vực cần tạo cảm giác giống bố cục văn bản truyền thống.
.content {
text-align: justify;
}
Tuy nhiên, không nên sử dụng justify một cách máy móc cho toàn bộ website. Với đoạn văn ngắn hoặc vùng hiển thị hẹp, khoảng cách giữa các từ có thể bị kéo giãn và làm giảm khả năng đọc. Nên lựa chọn kiểu căn dựa trên độ dài nội dung, kích thước màn hình và bố cục thực tế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-align trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
