Cách căn giữa hình ảnh bằng cách sử dụng căn chỉnh văn bản: Căn giữa

Một phần tử là một phần tử nội tuyến (giá trị hiển thị của inline-block). Nó có thể dễ dàng căn giữa bằng cách thêm thuộc tính text-align: center;CSS vào phần tử mẹ chứa nó.

Để căn giữa một hình ảnh bằng cách sử dụng, text-align: center;bạn phải đặt bên trong một phần tử cấp khối chẳng hạn như a div. Vì thuộc text-aligntính chỉ áp dụng cho các phần tử cấp khối, bạn đặt text-align: center;trên phần tử cấp khối bao quanh để đạt được căn giữa theo chiều ngang .

Thí dụ

   Center an Image using text align center  .img-container { text-align: center; } 

Lưu ý: Phần tử mẹ phải là phần tử khối. Nếu nó không phải là một phần tử khối, bạn nên thêmdisplay: block;thuộc tính CSS cùng với thuộctext-aligntính.

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

Demo: Codepen

Đối tượng phù hợp

Khi hình ảnh của bạn đã được căn giữa, bạn có thể muốn thay đổi kích thước của nó. Các object-fitquy định cụ thể tài sản như thế nào một yếu tố phản ứng với chiều rộng / chiều cao của hộp mẹ nó.

Thuộc tính này có thể được sử dụng cho hình ảnh, video hoặc bất kỳ phương tiện nào khác. Nó cũng có thể được sử dụng với thuộc object-positiontính để kiểm soát nhiều hơn cách hiển thị phương tiện.

Về cơ bản, chúng tôi sử dụng thuộc object-fittính để xác định cách nó kéo căng hoặc thu nhỏ một phương tiện nội tuyến.

Cú pháp

.element 

Giá trị

  • fill: Đây là giá trị mặc định . Thay đổi kích thước nội dung để khớp với hộp chính của nó bất kể tỷ lệ khung hình.
  • contain: Thay đổi kích thước nội dung để lấp đầy hộp chính của nó bằng cách sử dụng tỷ lệ khung hình chính xác.
  • cover: tương tự như containnhưng thường cắt xén nội dung.
  • none: hiển thị hình ảnh ở kích thước ban đầu.
  • scale-down: so sánh sự khác biệt giữa nonecontainđể tìm kích thước vật thể bê tông nhỏ nhất.

tính tương thích của trình duyệt web

Các object-fitđược hỗ trợ bởi hầu hết các trình duyệt hiện đại, đối với các thông tin cập nhật nhất về tính tương thích, bạn có thể kiểm tra này ra //caniuse.com/#search=object-fit.

Tài liệu

  • text-align - MDN
  • đối tượng phù hợp - MDN
  • - MDN