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ẽ giới thiệu 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 Margin

Đặt thuộc tính Margin là một trong những cách dễ nhất để căn giữa 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 (inline) thành một phần tử khối (block). 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, 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 phải 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 margin một giá trị auto:

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

>>> Đọc ngay: Hướng dẫn cơ bản về CSS cho người mới bắt đầu

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.

Đầ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ủa nó được đặt là center như sau:

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

>>> Đọc ngay: FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy

3. Sử dụng phần tử center

Các phương pháp hay nhất về web khuyến khích bạn sử dụng CSS để style và HTML làm ngôn ngữ, vì vậy bạn không nên sử dụng phương pháp HTML này. Thẻ center, có chức năng 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 muốn, đây là cách căn giữa một hình ảnh chỉ bằng HTML. Đơn giản chỉ cần bọc thẻ img trong một thẻ center như sau:

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

Đó là cách căn giữa hình ảnh 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à thuộc tính text-align.

>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:

>>> Xem thêm chuỗi bài viết liên quan:

10 ví dụ mã CSS mà bạn có thể học trong 10 phút

Cách tạo Mẫu F và Z bằng HTML và CSS

8 mẹo và thủ thuật CSS mọi lập trình viên nên biết

10 mẫu nền CSS bạn có thể sử dụng trên trang web của mình

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/css-center-images/