Căn chỉnh CSS hình ảnh

(a) Căn trái

Hình ảnh sẽ đi theo căn trái của khối văn bản

(b) Căn chỉnh tâm

Hình ảnh sẽ theo căn giữa của khối văn bản

(c) Căn phải

Hình ảnh sẽ đi theo căn chỉnh bên phải của khối văn bản

Tùy thuộc vào nhu cầu của mình, bạn có thể sử dụng thuộc tính “float” hoặc “text-align” để căn chỉnh hình ảnh hiệu quả hơn. Để tìm hiểu thêm về mã hóa HTML & CSS, bạn có thể tham khảo sách có sẵn trong Thư viện

Tìm cách căn giữa hình ảnh bằng CSS? . May mắn thay, căn giữa hình ảnh bằng CSS thực sự đơn giản và chúng tôi sẽ chỉ cho bạn cách thực hiện việc này trong một vài bước

Cũng như nhiều nhiệm vụ thiết kế web, có nhiều cách để hoàn thành việc này. Chúng tôi sẽ đề cập đến ba phương pháp chính trong bài viết này. Bắt đầu nào

1. Sử dụng thuộc tính lề

Đặt thuộc tính lề là một trong những cách dễ nhất để căn giữa hình ảnh theo chiều ngang bằng CSS. Lề là một thành phần cốt lõi của mô hình hộp CSS

Trước tiên, bạn sẽ cần chuyển đổi thành phần hình ảnh từ thành phần nội tuyến thành thành phần khối. Các phần tử HTML cấp khối chiếm toàn bộ chiều rộng của phần tử cha và có khả năng chiếm toàn bộ chiều rộng của trang

Bằng cách biến phần tử hình ảnh thành phần tử khối, sau đó bạn có thể thao tác vị trí của phần tử đó bằng cách điều chỉnh lề ngang của phần tử đó. Bạn cũng cần đặt chiều rộng cụ thể cho hình ảnh, để xác định hình ảnh chiếm bao nhiêu dung lượng trên trang

Dù bạn chọn chiều rộng nào, hình ảnh sẽ cần có lề trái và phải bằng nhau. Bạn có thể đạt được điều này một cách dễ dàng bằng cách cung cấp cho thuộc tính lề một giá trị tự động

 img.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 800px;
} 

2. Sử dụng Bố cục Flexbox

Phương pháp này yêu cầu đặt hình ảnh vào phần tử cấp khối, thường là div

 
class="center">
    <img src="xyz.jpg">
div> 

Khi bạn đã hoàn thành việc này, bạn có thể thêm một số thuộc tính để điều chỉnh giao diện của nó. Bạn sẽ sử dụng hai thuộc tính CSS

Cái đầu tiên là thuộc tính display với giá trị được đặt thành flex. Bạn cũng có thể sử dụng flex để căn chỉnh các phần tử trong HTML. Thuộc tính thứ hai bạn sẽ thêm vào div của mình là justify-content, với giá trị được đặt ở giữa như vậy

 div.center {
    display: flex;
    justify-content: center;
} 

3. Sử dụng Phần tử trung tâm không dùng nữa

Các phương pháp hay nhất về web khuyến khích bạn sử dụng CSS để tạo kiểu và HTML cho ngữ nghĩa, vì vậy bạn không nên sử dụng phương pháp HTML này. Thẻ trung tâm, căn giữa nội dung của nó theo chiều ngang, không được dùng trong HTML5

Nhưng nếu bạn phải, đây là cách căn giữa hình ảnh chỉ bằng HTML. Chỉ cần bọc thẻ img trong thẻ trung tâm như vậy

Đó là cách căn chỉnh hình ảnh của bạn trong HTML

Chúng tôi đã chỉ cho bạn ba phương pháp khác nhau, dễ sử dụng để căn giữa hình ảnh của bạn trong tài liệu HTML. Hãy thử tất cả và chọn cái phù hợp nhất với bạn. Tránh phương pháp thứ ba trừ khi bạn hoàn toàn không có lựa chọn nào khác

Một điều cần lưu ý là có khá nhiều cách khác để căn giữa hình ảnh bằng HTML và CSS. Một phương pháp phổ biến hoạt động cho cả văn bản và hình ảnh nội tuyến là thuộc tính text-align

Có căn chỉnh hình ảnh trong CSS không?

Làm cách nào để định vị một hình ảnh trong CSS?