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 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 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 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 ký quỹ 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 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 hiển thị với giá trị được đặt thành linh hoạt . 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 ở giữa như sau:
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. 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 một hình ảnh chỉ bằng HTML. Đơn giản chỉ cần bọc thẻ img trong một thẻ trung tâm 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.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-center-images/
