Cách căn giữa hình ảnh với CSS

Tìm cách căn giữa một hình ảnh bằng cách sử dụng CSS? Các vấn đề về căn chỉnh thường là một nguyên nhân gây thất vọng cho các nhà thiết kế web. May mắn thay, căn giữa một 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.

Như với nhiều nhiệm vụ thiết kế web, có nhiều cách để hoàn thành công 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 ký quỹ

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

Đầu tiên, bạn sẽ cần chuyển đổi phần tử hình ảnh từ một phần tử nội dòng thành một phần tử 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ử mẹ của chúng và có khả năng chiếm toàn bộ chiều rộng của một trang.

Bằng cách biến một phần tử hình ảnh thành một phần tử khối, sau đó bạn có thể thao tác vị trí của nó bằng cách điều chỉnh các lề ngang của nó. Bạn cũng sẽ cần đặt chiều rộng cụ thể cho hình ảnh, để xác định lượng không gian hình ảnh chiếm 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 đặt cho thuộc tính ký quỹ một giá trị là 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 trong phần tử cấp khối, thường là div:

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

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

Cái đầu tiên là trưng bày thuộc tính có giá trị của nó được đặt thành uốn cong. 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à biện minh-nội dungvới giá trị của nó được đặt thành trung tâm như vậy:

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

3. Sử dụng Phần tử trung tâm không được 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. Các trung tâm thẻ, 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 một hình ảnh chỉ bằng HTML. Đơn giản chỉ cần quấn img thẻ trong một thẻ trung tâm như vậy:

<center>
<img src="xyz.jpg">
</center>

Đó 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 cách sử dụ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à căn chỉnh văn bản bất động sản.

Đọc tiếp

Giới thiệu về tác giả