Cách căn chỉnh hình ảnh ở giữa cột trong Bootstrap 4

Ghi chú. Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy bạn muốn sử dụng float hay flex để tạo bố cục ba cột. Tuy nhiên, nếu bạn cần hỗ trợ cho IE10 trở xuống, bạn nên sử dụng float

Mẹo. Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi

Thêm phản hồi

Theo tùy chọn, bạn có thể thêm các truy vấn phương tiện để làm cho các hình ảnh xếp chồng lên nhau thay vì nổi cạnh nhau, trên một chiều rộng màn hình cụ thể

Việc căn giữa các phần tử theo chiều dọc luôn là một thách thức trong CSS, chứ chưa nói đến Bootstrap. Trong câu chuyện này, tôi sẽ kiểm tra tất cả các cách tiếp cận mới trong Bootstrap 4, cách tiếp cận này đơn giản hơn trung tâm dọc trong Bootstrap 3

Giờ đây, Bootstrap 4 là flexbox theo mặc định, việc căn chỉnh theo chiều dọc sẽ dễ dàng hơn một chút. Nhìn chung, có 3 cách tiếp cận khác nhau đối với căn chỉnh dọc…

2. Tiện ích Flexbox
3. Tiện ích hiển thị cùng với tiện ích Căn dọc

Lúc đầu, các tiện ích “Căn chỉnh dọc” có vẻ là một lựa chọn rõ ràng, nhưng chúng chỉ hoạt động với các thành phần hiển thị bảng và nội tuyến. Xem xét các tùy chọn và tình huống căn chỉnh theo chiều dọc sau đây

Nói chung, có 2 loại tình huống căn chỉnh theo chiều dọc mà bạn sẽ gặp phải…

1. định tâm theo chiều dọc trong vùng chứa chính
2. hoặc, định tâm theo chiều dọc so với các phần tử liền kề

1 — Căn giữa theo chiều dọc Sử dụng Lề tự động

Một cách để căn giữa theo chiều dọc là sử dụng

   

     
Card

   

2. Thao tác này sẽ căn giữa phần tử bên trong hộp chứa flexbox của nó [Bootstrap 4

   

     
Card

   

3 là

   

     
Card

   

4]. Ví dụ:

   

     
Card

   

5 làm cho hàng có chiều cao đầy đủ và

   

     
Card

   

2 sẽ căn giữa cột

margin-top: auto;
margin-bottom: auto;

0 theo chiều dọc

   

     
Card

   

   

     
Card

   

2 đại diện cho lề trên trục y dọc và tương đương với

margin-top: auto;
margin-bottom: auto;

Bản trình diễn — Trung tâm Dọc Sử dụng Lề Tự động

2 — Trung tâm theo chiều dọc với Flexbox

Vì lớp Bootstrap 4

   

     
Card

   

3 hiện là

   

     
Card

   

4 nên bạn chỉ cần sử dụng tiện ích flexbox

margin-top: auto;
margin-bottom: auto;

4 mới trên bất kỳ cột nào để căn giữa cột theo chiều dọc

   

      

      Center
      

   

   

      

      Taller
      

   

0, v.v. Chúng có thể được sử dụng với các tiện ích căn chỉnh dọc để căn chỉnh các thành phần ô nội tuyến, khối nội tuyến hoặc ô bảng

   

     
Card

   

1

Demo — Dọc Trung tâm Sử dụng Hiển thị Utils

Thêm ví dụ về trung tâm dọc

Định tâm theo chiều dọc của Bootstrap 4 trong các thẻ có chiều cao bằng nhau
Định tâm theo chiều dọc của Bootstrap 4 với các thẻ

Để theo dõi các phát triển, ví dụ và chủ đề mới nhất của Bootstrap 4, hãy xem Bootstrap4 của tôi. hướng dẫn

Làm cách nào để đặt trung tâm căn chỉnh hình ảnh trong bootstrap?

Làm cách nào để căn giữa hình ảnh trong div bằng bootstrap?