Bất kỳ văn bản có thể được căn chỉnh sang trái, giữa hoặc phải trên một trang web. Hình ảnh cũng có thể được căn chỉnh trên một trang web giống như văn bản. Dưới đây là các ví dụ về cách bên trái, tab, giữa và văn bản và hình ảnh căn lề phải.

Mẹo: Nếu bất kỳ căn chỉnh văn bản nào của bạn không hoạt động, hãy đảm bảo các lớp hoặc kiểu CSS khác được áp dụng cho cùng một phần tử hoặc phần tử chứa không xung đột với lời biện minh bạn đang cố gắng thực hiện.

Lưu ý: Với các ví dụ và hầu hết căn chỉnh, văn bản được căn chỉnh trong phần tử chứa văn bản. Văn bản có thể được căn giữa trong một div HTML và được căn trái trên phần còn lại của trang web. Ngoài ra, mọi thứ có trong thẻ chứa phần biện minh CSS (ví dụ: hình ảnh) cũng được căn chỉnh.

Ví dụ về sự liên kết

Căn lề trái

Tab căn chỉnh

Trung tâm liên kêt

Sắp xếp đúng

Ví dụ liên kết trái

Theo mặc định, tiếng Anh và các ngôn ngữ khác căn chỉnh văn bản sang trái. Tuy nhiên, nếu phần tử chứa văn bản hoặc hình ảnh được căn phải hoặc bạn cần thay đổi căn chỉnh văn bản hoặc hình ảnh, mã dưới đây có thể được thêm vào thành phần của bạn hoặc vào CSS.

Mã HTML

Căn lề trái

Mẹo: Xem các mẹo bổ sung bên dưới để điều chỉnh căn chỉnh, phần đệm và lề của phần tử.

Ví dụ về tab được căn chỉnh

Mặc dù không có căn chỉnh văn bản "tab", lề trái có thể được thêm vào một yếu tố để xuất hiện căn chỉnh tab, như hiển thị bên dưới.

Mã HTML

Tab căn chỉnh

Mẹo: Xem các mẹo bổ sung bên dưới để điều chỉnh căn chỉnh, phần đệm và lề của phần tử.

Ví dụ liên kết trung tâm

Sử dụng thuộc tính text-align, bạn có thể căn giữa bất kỳ văn bản hoặc hình ảnh nào trong một phần tử, như trong ví dụ dưới đây.

Mã HTML

Trung tâm liên kêt

Mẹo: Xem các mẹo bổ sung bên dưới để điều chỉnh căn chỉnh, phần đệm và lề của phần tử.

Ví dụ liên kết bên phải

Sử dụng thuộc tính text-align, bạn có thể căn giữa bất kỳ văn bản hoặc hình ảnh nào trong một phần tử, như trong ví dụ dưới đây.

Mã HTML

Sắp xếp đúng

Mẹo: Ngoài ra, bạn có thể sử dụng CSS để căn chỉnh đúng hình ảnh trên trang web.

Mẹo: Xem các mẹo bổ sung bên dưới để điều chỉnh căn chỉnh, phần đệm và lề của phần tử.

Mẹo căn chỉnh bổ sung

Dưới đây là các mẹo căn chỉnh bổ sung có thể được áp dụng cho bất kỳ quy tắc kiểu nào ở trên hoặc các lớp CSS khác.

1. Một lề bổ sung có thể được thêm vào bất kỳ kiểu nào ở trên nếu bạn yêu cầu thụt lề bổ sung hoặc muốn thêm phần đệm. Ví dụ: bạn có thể áp dụng một lề phải cho ví dụ được căn phải để di chuyển văn bản hơn nữa vào phần tử.
2. Nếu bạn muốn có một trang phản hồi nhanh hơn, hãy đảm bảo điều chỉnh hoặc xóa mọi biện minh trái hoặc phải khi xem trên màn hình nhỏ hơn.