💡 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: 2025年3月1日
Căn giữa văn bản
📌
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ằngtext-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.
■ 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.