Cách căn giữa một hình ảnh theo chiều dọc và chiều ngang bằng CSS

Nhiều nhà phát triển gặp khó khăn khi làm việc với hình ảnh. Việc xử lý độ nhạy 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 một 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 đăng trước của mình. Nếu bạn không quen thuộc với những thuộc tính đó, tôi khuyên bạn nên xem những bài viết đó trước khi đọc bài viết này.

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

Căn giữa hình ảnh theo chiều ngang

Hãy bắt đầu với việc căn giữa một 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 một hình ảnh theo chiều ngang là sử dụng thuộc text-aligntính. 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ư :

 div { text-align: center; } 

Ký quỹ: Tự động

Một cách khác để căn giữa hình ảnh là sử dụng thuộc margin: autotính (cho lề trái và lề phải).

Tuy nhiên, việc sử dụng margin: automột mình sẽ không hiệu quả đối với hình ảnh. Nếu bạn cần sử dụng margin: auto, có 2 thuộc tính bổ sung bạn cũng phải sử dụng.

Thuộc tính margin-auto không có bất kỳ ảnh hưởng nào đến các phần tử cấp nội tuyến. Vì thẻ là một phần tử nội dòng, trước tiên chúng ta cần chuyển đổi nó thành một 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, các lề trái và phải có thể lấy 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 mẹo (trừ khi chúng tôi cung cấp cho nó chiều rộng 100%):

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

Màn hình: Flex

Cách thứ ba để căn giữa một hình ảnh theo chiều ngang là sử dụng display: flex. Giống như chúng tôi đã sử dụng thuộc text-aligntính cho một thùng chứa, chúng tôi cũng sử dụng display: flexcho một thùng chứa.

Tuy nhiên, sử dụng display: flexmột mình sẽ không đủ. Vùng chứa cũng phải có một thuộc tính bổ sung được gọi là justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

Các justify-contentbất động sản làm việc cùng với display: flex, mà chúng tôi có thể sử dụng để tập trung các 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ó chiếm 100% không gian và khi đó chúng ta không thể căn giữa nó.

Chú ý: Các display: flextài sản không được hỗ trợ trong phiên bản cũ của trình duyệt. Xem tại đây để biết thêm chi tiết.

Căn giữa hình ảnh theo chiều dọc

Màn hình: Flex

Đối với căn chỉnh theo chiều dọc, việc sử dụng display: flexlại thực sự hữu ích.

Hãy xem xét trường hợp vùng chứa của chúng tôi có chiều cao là 800px, nhưng chiều cao của hình ảnh chỉ là 500px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Bây giờ, trong trường hợp này, thêm một dòng mã vào vùng chứa align-items: center, thực hiện mẹo:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Các align-itemsyếu tố vị trí tài sản lon theo chiều dọc nếu sử dụng cùng với display: flex.

Vị trí: Thuộc tính tuyệt đối & chuyể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 positiontransformcùng nhau. Cái này hơi phức tạp, vì vậy chúng ta hãy 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ừ staticthành absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Ngoài ra, nó phải nằm bên trong một vùng chứa được định vị tương đối, vì vậy chúng tôi thêm position: relativevào div vùng chứa của nó.

Bước 2: Xác định thuộc tính trên và 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%. Thao tác 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 { width: 80%; position: absolute; top: 50%; left: 50%; }

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 bên ngoài vùng chứa của nó. Vì vậy, chúng ta cần đưa nó trở lại bên trong.

Việc xác định một thuộc transformtính và thêm -50% vào trục X và Y của nó thực hiện mẹo:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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, hãy truy cập Kênh Youtube của tôi để biết thêm.

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