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

Nhiều nhà phát triển gặp khó khăn khi làm việc với hình ảnh. Xử lý khả năng phản hồi [/ news / css-responsive-image-tutorial /] 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 CSS khác nhau

Bạn đang xem: hình ảnh trung tâm trong div theo chiều dọc

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ý khả năng 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 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 CSS Vị trí Hiển thị trong bài đăng 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:

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

Hãy bắt đầu 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.

Text-Align

Cách đầu tiên để căn giữa hình ảnh theo chiều ngang là sử dụng thuộc tính text-align . 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ư & lt; div & gt; :

  & lt; phong cách & gt;
  div {
    text-align: center;
  }
& lt; / style & gt;

& lt; div & gt;
  & lt; img src = "your-image.jpg" & gt;
& lt; / div & gt;  

Margin: Auto

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

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

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ẻ & lt; img & gt; là một phần tử nội dòng, trước tiên chúng ta cần chuyển nó thành phần tử cấp khối:

  img {
  margin: tự động;
  hiển thị: khối;
}  

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ể 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 mẹo (trừ khi chúng tôi cung cấp cho nó độ rộng 100%):

  img {
  chiều rộng: 60%;
  margin: tự động;
  hiển thị: khối;
}  

Display: Flex

Cách thứ ba để căn giữa 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 tính text-align cho một vùng chứa, chúng tôi cũng sử dụng display: flex cho một vùng chứa.

Tuy nhiên, chỉ sử dụng display: flex là 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 {
  hiển thị: flex;
  justify-content: trung tâm;
}

img {
  chiều rộng: 60%;
}  

Thuộc tính justify-content hoạt động cùng với display: flex , chúng ta có thể sử dụng thuộc tính này để 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ó chiếm 100% không gian và khi đó chúng tôi không thể căn giữa nó.

Quan trọng: Thuộc tính display: flex 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.

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

Hiển thị: Linh hoạt

Để căn chỉnh theo chiều dọc, việc sử dụng display: flex một lần nữa 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 {
  hiển thị: flex;
  justify-content: trung tâm;
  chiều cao: 800px;
}

img {
  chiều rộng: 60%;
  chiều cao: 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 thủ thuật:

< pre> div {
hiển thị: flex;
justify-content: trung tâm;
align-các mục: trung tâm;
chiều cao: 800px;
}

Thuộc tính align-items có thể định vị các phần tử theo chiều dọc nếu được sử dụng cùng với display: flex .

Vị trí: Tuyệt đối & amp; Thuộc tính 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 vị trí biến đổi cùng nhau. Cái này hơi phức tạp nên 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ừ static thành < mã> tuyệt đối :

  div {
  chiều cao: 800px;
  chức vụ: thân nhân;
  nền: đỏ;
}

img {
  chiều rộng: 80%;
  vị trí: tuyệt đối;
}  

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: relative vào div vùng chứa của nó.

Bước 2: Xác định Trên cùng & amp; Thuộc tính 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%. 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 {
  chiều rộng: 80%;
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
}  

Bước 3: Xác định Thuộc tính Chuyển đổi

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

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

  img {
  chiều rộng: 80%;
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-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 mình ở 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 < / span> để biết thêm.

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


Xem thêm những thông tin liên quan đến chủ đề hình ảnh trung tâm trong div theo chiều dọc

4 Quickest Ways to Center Div with CSS

  • Tác giả: Red Stapler
  • Ngày đăng: 2019-02-12
  • Đánh giá: 4 ⭐ ( 6884 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 4 quickest CSS Methods to center div on screen or other div both vertically and horizontally.
    Source code: https://redstapler.co/4-ways-to-center-div-css/
    Follow us on
    Facebook: https://www.facebook.com/theRedStapler
    Website: http://redstapler.co/
    Twitter: https://twitter.com/redStapler_twit

2 mô hình quản lý nhân sự phổ biến

  • Tác giả: doanhnhansaigon.vn
  • Đánh giá: 3 ⭐ ( 6681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Không có mô hình quản lý đúng hay sai, điều quan trọng là tính phù hợp với quy mô, tầm nhìn cũng như đặc trưng văn hóa của từng công ty.

Làm cách nào để căn chỉnh theo chiều dọc một hình ảnh bên trong div

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6107 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách duy nhất (và cách tốt nhất cho trình duyệt chéo) mà tôi biết là sử…

Cách tạo tâm hình ảnh (theo chiều dọc và chiều ngang) bên trong một div lớn hơn

  • Tác giả: vi.dpbhouse.com
  • Đánh giá: 4 ⭐ ( 8255 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một div 200 x 200 px. Tôi muốn đặt một hình ảnh 50 x 50 px ngay giữa div. Nó được hoàn thiện bằng cách nào? Tôi có thể lấy nó căn giữa theo chiều ngang bằng cách sử dụng text-align: center cho di …

Làm thế nào để hình ảnh tâm theo chiều dọc của chiều cao động bên trong một div có chiều cao cố định?

  • Tác giả: vie.peacedaychallenge.org
  • Đánh giá: 5 ⭐ ( 3433 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang tạo một thư viện hình ảnh với các hình ảnh có chiều cao thay đổi bên trong một div có chiều cao và chiều rộng cố định. Chiều cao của div mẹ của tôi là 460px. Tôi muốn tất cả các hình ảnh nhỏ hơn chiều cao 460px đều được căn chỉnh

Cách tạo trung tâm hình ảnh (theo chiều dọc và chiều ngang) bên trong một div lớn hơn

  • Tác giả: vi.gtainspections.com
  • Đánh giá: 4 ⭐ ( 7798 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một div 200 x 200 px. Tôi muốn đặt một hình ảnh 50 x 50 px ngay giữa div. Nó được hoàn thiện bằng cách nào? Tôi có thể lấy nó căn giữa theo chiều ngang bằng cách sử dụng text-align: center cho di …

Chuyển giao công nghệ theo chiều dọc là gì?

  • Tác giả: vietnambiz.vn
  • Đánh giá: 3 ⭐ ( 8820 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển giao công nghệ theo chiều dọc là một trong những kênh chuyển giao công nghệ chủ yếu của tổ chức, doanh nghiệp.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Triển khai một danh sách được liên kết trong Java bằng cách sử dụng Class - triển khai một lớp java