Trần Ngọc Thanh - 570
- 12/07/2025
Trần Ngọc Thanh 
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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
Trần Ngọc Thanh
Content Trần Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác
Chia sẻ nội dung đánh giá của bạn về Thuộc tính text-align trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
