💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Căn giữa văn bản | Căn giữa | text-align

📌

Kết luận

Dùng text-align: center để căn giữa văn bản

📝 Mã thực tế tại đây

h1 { text-align: center; }

Các giá trị của text-align

Giá trị	Hiệu quả	Trường hợp sử dụng
`left`	Căn trái (mặc định)	Văn bản thông thường
`center`	Căn giữa	Tiêu đề, slogan
`right`	Căn phải	Ngày tháng, chữ ký
`justify`	Căn đều hai bên	Bố cục dạng báo chí hoặc in ấn

Căn giữa văn bản vs Căn giữa khối phần tử

text-align chỉ thay đổi vị trí của văn bản (phần tử nội dòng). Nếu bạn muốn căn giữa cho bản thân cả một chiếc hộp (phần tử khối), bạn sẽ cần phương pháp khác.

Đối tượng	Phương pháp
Văn bản	`text-align: center`
Khối phần tử	`margin: 0 auto`
Phần tử con trong Flex	`justify-content: center`

Tổng kết

- Căn giữa văn bản bằng text-align: center - Căn giữa khối phần tử bằng margin: 0 auto - Lựa chọn phương pháp tùy theo đối tượng bạn muốn căn chỉnh

Hãy thử trong phần bài tập

Hãy thử căn giữa cho tiêu đề h1 nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Hãy căn giữa cho thẻ tiêu đề h1.

Gợi ý khi gặp khó khăn

Sử dụng thuộc tính text-align: center.

10pt

Căn giữa văn bản

Hãy căn giữa cho thẻ tiêu đề h1.

Mã nguồn

<h1>見出し</h1>

Xem trước

Lỗi & Console

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Căn giữa văn bản" là bài HTML/CSS/JS mức 入門. Hãy căn giữa cho thẻ tiêu đề h1. Chạy ngay trên trình duyệt với kiểm tra tự động.

text-align dùng để điều chỉnh cách sắp xếp văn bản theo chiều ngang (trái, phải, giữa, hoặc đều hai bên). Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình css-basic. Bài #19 củng cố kỹ năng css-basic.

Quy trình từng bước

Đọc bài giải thích và nắm mục tiêu "Căn giữa văn bản"
Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
Mở gợi ý nếu bí, so sánh với lời giải
Bấm Chạy để xem preview/console
Hệ thống kiểm tra có chứa: text-align, center.
Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

Mã giải dùng thẻ: h1, style. Kiểm tra thẻ đóng và lồng nhau. CSS dùng: text-align. Chú ý selector và chính tả. Giải thích: text-align dùng để điều chỉnh cách sắp xếp văn bản theo chiều ngang (trái, phải, giữa, hoặc đều hai bên). Gợi ý: Sử dụng thuộc tính text-align: center.

Ứng dụng thực tế & nghề nghiệp

CSS cơ bản là nền trước Tailwind/Bootstrap. Màu, khoảng cách, typography tạo nhất quán thương hiệu.

Lỗi thường gặp

Bỏ qua gợi ý: Sử dụng thuộc tính text-align: center.
Nhầm margin và padding
Thiếu # trong mã hex
Quên . khi chọn class

Xử lý sự cố

Preview không đổi sau khi chạy: Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass: Hệ thống kiểm tra có chứa: text-align, center. Kiểm tra typo và thẻ đóng.
Lỗi trên console: Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại: Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

Giải thích kỹ thuật trong "Căn giữa văn bản" bằng lời của bạn trong 30 giây
Luyện mô tả từng dòng mã giải trên bảng trắng
Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

color: Thuộc tính màu chữ.
padding: Khoảng cách bên trong phần tử.
margin: Khoảng cách bên ngoài phần tử.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Căn giữa văn bản cho từ khóa: Căn giữa văn bản, css-basic, 入門, h1, style, text-align, text align center.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Căn giữa văn bản có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Căn giữa văn bản" ở mức "入門". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Căn giữa văn bản"?

text-align dùng để điều chỉnh cách sắp xếp văn bản theo chiều ngang (trái, phải, giữa, hoặc đều hai bên). Gợi ý: Sử dụng thuộc tính text-align: center.

Vị trí danh mục css-basic?

CSS cơ bản là nền trước Tailwind/Bootstrap. Màu, khoảng cách, typography tạo nhất quán thương hiệu.

Các bước cụ thể cho "Căn giữa văn bản"?

1. Đọc bài giải thích và nắm mục tiêu "Căn giữa văn bản"
2. Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: text-align, center.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

Mã giải dùng thẻ: h1, style. Kiểm tra thẻ đóng và lồng nhau.

CSS dùng: text-align. Chú ý selector và chính tả.

Giải thích: text-align dùng để điều chỉnh cách sắp xếp văn bản theo chiều ngang (trái, phải, giữa, hoặc đều hai bên).

Gợi ý: Sử dụng thuộc tính text-align: center.

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: text-align, center. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Căn giữa văn bản" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Công cụ liên quan?

Chuyển màu, px/rem

Kiến thức nền?

Đọc Lộ trình học trước.

ツール一覧