Cách căn giữa hình ảnh trong cột bootstrap

Nhiều nhà phát triển gặp khó khăn khi làm việc với hình ảnh. Xử lý phản hồi và căn chỉnh đặc biệt khó khăn, đặc biệt là căn giữa một hình ảnh ở giữa trang

Vì vậy, trong bài đăng này, tôi sẽ chỉ ra một số cách phổ biến nhất để căn giữa hình ảnh theo cả chiều dọc và chiều ngang bằng cách sử dụng các thuộc tính CSS khác nhau

Tôi đã xem qua các thuộc tính Vị trí và Hiển thị CSS trong bài viết trước của mình. Nếu bạn không quen thuộc với các thuộc tính đó,  tôi khuyên bạn nên xem các bài đăng đó trước khi đọc bài viết này

Đây là phiên bản video nếu bạn muốn xem thử

Định tâm hình ảnh theo chiều ngang

Hãy bắt đầu với việc căn giữa hình ảnh theo chiều ngang bằng cách sử dụng 3 thuộc tính CSS khác nhau

Căn chỉnh văn bản

Cách đầu tiên để căn giữa hình ảnh theo chiều ngang là sử dụng thuộc tính

img {
  margin: auto;
  display: block;
}

1. Tuy nhiên, phương pháp này chỉ hoạt động nếu hình ảnh nằm trong vùng chứa cấp khối, chẳng hạn như

img {
  margin: auto;
  display: block;
}

0

Lề. Tự động

Một cách khác để căn giữa hình ảnh là sử dụng thuộc tính

img {
  margin: auto;
  display: block;
}

1 (cho lề trái và lề phải)

Tuy nhiên, chỉ sử dụng

img {
  margin: auto;
  display: block;
}

1 sẽ không hoạt động đối với hình ảnh. Nếu bạn cần sử dụng

img {
  margin: auto;
  display: block;
}

1, có 2 thuộc tính bổ sung mà bạn cũng phải sử dụng

Thuộc tính lề-tự động không có bất kỳ tác dụng nào đối với các phần tử ở cấp độ nội tuyến. Vì thẻ

img {
  margin: auto;
  display: block;
}

4 là một phần tử nội tuyến, trước tiên chúng tôi cần chuyển đổi nó thành phần tử cấp khối

img {
  margin: auto;
  display: block;
}

Thứ hai, chúng ta cũng cần xác định chiều rộng. Vì vậy, lề trái và phải có thể chiếm phần còn lại của không gian trống và tự động căn chỉnh, điều này thực hiện thủ thuật (trừ khi chúng tôi cung cấp cho nó chiều rộng là 100%)

img {
  width: 60%;
  margin: auto;
  display: block;
}

Trưng bày. Uốn cong

Cách thứ ba để căn giữa hình ảnh theo chiều ngang là sử dụng

img {
  margin: auto;
  display: block;
}

5. Giống như chúng tôi đã sử dụng thuộc tính

img {
  margin: auto;
  display: block;
}

1 cho một vùng chứa, chúng tôi cũng sử dụng

img {
  margin: auto;
  display: block;
}

5 cho một vùng chứa

Tuy nhiên, chỉ sử dụng

img {
  margin: auto;
  display: block;
}

5 sẽ không đủ. Vùng chứa cũng phải có một thuộc tính bổ sung được gọi là

img {
  margin: auto;
  display: block;
}

9

2

Thuộc tính

img {
  margin: auto;
  display: block;
}

9 hoạt động cùng với

img {
  margin: auto;
  display: block;
}

5, mà chúng ta có thể sử dụng để căn giữa hình ảnh theo chiều ngang

Cuối cùng, chiều rộng của hình ảnh phải nhỏ hơn chiều rộng của vùng chứa, nếu không, nó sẽ chiếm 100% dung lượng và sau đó chúng tôi không thể căn giữa

Quan trọng. Thuộc tính

img {
  margin: auto;
  display: block;
}

5 không được hỗ trợ trong các phiên bản trình duyệt cũ hơn. Xem tại đây để biết thêm chi tiết

Định tâm hình ảnh theo chiều dọc

Trưng bày. Uốn cong

Đối với căn chỉnh dọc, sử dụng

img {
  margin: auto;
  display: block;
}

5 một lần nữa thực sự hữu ích

Xét trường hợp vùng chứa của chúng ta có chiều cao là 800px nhưng chiều cao của hình ảnh chỉ là 500px

7

Bây giờ, trong trường hợp này, việc thêm một dòng mã vào vùng chứa,

img {
  width: 60%;
  margin: auto;
  display: block;
}

4, thực hiện thủ thuật

9

Thuộc tính

img {
  width: 60%;
  margin: auto;
  display: block;
}

5 có thể định vị các phần tử theo chiều dọc nếu được sử dụng cùng với

img {
  margin: auto;
  display: block;
}

5

Chức vụ. Thuộc tính tuyệt đối và biến đổi

Một phương pháp khác để căn chỉnh theo chiều dọc là sử dụng các thuộc tính

img {
  width: 60%;
  margin: auto;
  display: block;
}

7 và

img {
  width: 60%;
  margin: auto;
  display: block;
}

8 cùng nhau. Cái này hơi phức tạp nên làm từng bước một

Bước 1. Xác định vị trí tuyệt đối

Đầu tiên, chúng tôi thay đổi hành vi định vị của hình ảnh từ

img {
  width: 60%;
  margin: auto;
  display: block;
}

9 thành

20

img {
  margin: auto;
  display: block;
}

6

Ngoài ra, nó phải ở bên trong một vùng chứa được định vị tương đối, vì vậy chúng tôi thêm

21 vào div vùng chứa của nó

Bước 2. Xác định các thuộc tính trên cùng và bên trái

Thứ hai, chúng tôi xác định các thuộc tính trên cùng và bên trái cho hình ảnh và đặt chúng thành 50%. Điều này sẽ di chuyển điểm bắt đầu (trên cùng bên trái) của hình ảnh vào giữa vùng chứa

img {
  margin: auto;
  display: block;
}

8

Bước 3. Xác định thuộc tính chuyển đổi

Nhưng bước thứ hai đã di chuyển một phần hình ảnh ra ngoài vùng chứa của nó. Vì vậy, chúng ta cần phải mang nó trở lại bên trong

Việc xác định thuộc tính

img {
  width: 60%;
  margin: auto;
  display: block;
}

8 và thêm -50% vào trục X và Y của nó thực hiện thủ thuật

img {
  margin: auto;
  display: block;
}

0

Có nhiều cách khác để căn giữa mọi thứ theo chiều ngang và chiều dọc, nhưng tôi đã giải thích những cách phổ biến nhất. Tôi hy vọng bài đăng này đã giúp bạn hiểu cách căn chỉnh hình ảnh của bạn ở giữa trang

Nếu bạn muốn tìm hiểu thêm về Phát triển web, vui lòng truy cập Kênh Youtube của tôi để biết thêm

Cảm ơn bạn đã đọc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Cem Eygi

Nhà phát triển giao diện người dùng // Theo dõi tôi trên Youtube. https. //chút. ly/3dBiTUT

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu