Mặc dù nó không hẳn là khó, nhưng việc định tâm hình ảnh trên các trang web của bạn có thể liên quan nhiều hơn bạn nghĩ. Lý do chính là thẻ là một thành phần nội tuyến, vì vậy nó hoạt động khác với các yếu tố cấp khối. Một số cách tiếp cận sử dụng HTML; những người khác sử dụng CSS và một số được coi là "phù hợp" hơn những người khác ở chỗ họ không bị phản đối. Để tiến hành, chọn một phương pháp từ danh sách dưới đây và làm theo hướng dẫn.

Để hỗ trợ trong HTML5, bạn nên sử dụng thuộc tính style với giá trị text-align: centre bên trong phần tử mức khối; chẳng hạn như một thẻ.

Mã HTML ví dụ

Mẹo: Thêm một kiểu nội tuyến như được hiển thị ở trên chỉ nên được thực hiện một lần, nếu bạn cần căn giữa nhiều hình ảnh, bạn nên sử dụng đề xuất bên dưới và tạo một lớp CSS để giúp giảm mã dự phòng và tăng tốc trang web của bạn.

Ví dụ về trung tâm hình ảnh sử dụng mã trên

Chuyển đổi thành phần tử cấp khối

Một cách bạn có thể căn giữa hình ảnh chính xác là xác định phần tử như là một phần tử cấp khối. Để thực hiện việc này, hãy thêm quy tắc vào đầu trang của bạn (được hiển thị trong ví dụ sau) hoặc tệp CSS bên ngoài được liên kết.

Mã HTML ví dụ

 .centerImage {text-align: centre; hiển thị: khối; } 

Với mã này, bạn có thể áp dụng lớp centreImage cho một mà không cần phải lồng nó trong một phần tử cấp khối. Phương pháp này hoạt động cho nhiều hình ảnh.

Ví dụ mã hình ảnh làm trung tâm

Sử dụng các thẻ

Bạn có thể căn giữa một hình ảnh bằng cách kèm theo trong thẻ thẻ. Hành động này tập trung vào đó, và chỉ có thế, hình ảnh trên trang web. Cần lưu ý rằng phương pháp này không được dùng trong HTML5 và sẽ không luôn hoạt động trong tất cả các trình duyệt trong tương lai. Chúng tôi chỉ khuyên bạn nên sử dụng phương pháp này nếu không có bất kỳ đề xuất nào khác được đề cập ở trên hoạt động khi bạn đang cố gắng căn giữa một hình ảnh.

Mã HTML ví dụ