- Làm cách nào để căn giữa hình ảnh trong Div theo chiều ngang?
- tài sản ký quỹ
- Mô-đun Flexbox
- Bố cục dạng xem dạng lưới
- Thuộc tính vị trí
Làm cách nào để căn giữa hình ảnh trong Div theo chiều ngang?
Nhà phát triển có thể sử dụng thuộc tính lề, mô-đun Flexbox, bố cục Chế độ xem lưới và thuộc tính Vị trí để căn giữa hình ảnh trong div theo chiều ngang. Làm theo hướng dẫn bên dưới để căn giữa hình ảnh theo chiều ngang trong thẻ div.
Giả sử, có một div trong đó hình ảnh được đặt theo cách này trong tệp HTML:
< div lớp học = 'nguồn gốc' >
< hình ảnh src = '../book.jpg' chiều cao = 'năm mươi%' chiều rộng = 'năm mươi%' lớp học = 'hình ảnh' >
< / div >
Hình ảnh có chiều rộng và chiều cao là 50% và một lớp “hình ảnh”.
Sử dụng tài sản ký quỹ
Người dùng có thể thêm khoảng trống xung quanh các thành phần HTML bằng thuộc tính lề. Nó chỉ định một lề theo không gian có sẵn sau khi thay đổi kích thước màn hình cửa sổ. Chẳng hạn, đặt lề trái và phải thành tự động và thuộc tính hiển thị được đặt thành chặn:
hình ảnh {
hiển thị: khối;
lề trái: tự động;
lề-phải: tự động;
}
Sau khi thực hiện ví dụ trên, trang web trông như thế này:
Đầu ra ở trên đã hiển thị rằng hình ảnh hiện đang ở giữa.
Sử dụng mô-đun Flexbox
Các ' hộp linh hoạt ” là một mô-đun chứa một tập hợp đầy đủ các thuộc tính. Trong trường hợp của chúng tôi, hãy chọn lớp phần tử gốc và sử dụng flex làm giá trị của thuộc tính hiển thị. Đặt trung tâm làm giá trị cho “ biện minh cho nội dung ' Và ' sắp xếp các mục ' của cải:
.nguồn gốc {hiển thị: uốn cong;
biện minh- nội dung : trung tâm;
căn chỉnh các mục: trung tâm;
lý lịch- màu sắc : màu xanh da trời;
}
Trang web trông như thế này, sau khi thực thi mã:
Đầu ra ở trên cho thấy rằng hình ảnh được hiển thị ở trung tâm của div có màu nền được đặt thành màu xanh da trời.
Sử dụng mô-đun bố cục dạng xem lưới
Bố cục dạng xem dạng lưới có 12 cột và tổng chiều rộng được đặt thành 100% và nó đặt từng thành phần ở một vị trí cụ thể trên trang web:
.nguồn gốc {hiển thị: lưới;
mục địa điểm: trung tâm;
}
Trong đoạn mã trên, giá trị 'lưới' được gán cho thuộc tính hiển thị. Trong khi “place-item” được sử dụng làm cách viết tắt cho các thuộc tính “justify-content” và “align-items”:
Đầu ra xác thực rằng hình ảnh nằm ở trung tâm của div bằng phương thức lưới:
Sử dụng thuộc tính vị trí
Bằng cách đặt vị trí của lớp gốc thành giá trị tương đối và lớp hình ảnh thành giá trị tuyệt đối. Hình ảnh có thể được hiển thị ở trung tâm của div:
.nguồn gốc {vị trí: tương đối;
}
.hình ảnh {
chiều rộng : 700px;
chiều cao : 500px;
vị trí: tuyệt đối;
bên trái: năm mươi %;
biến đổi: dịchX ( - năm mươi % ) ;
}
Hình ảnh được di chuyển sang bên trái của “50%” và sau đó chuyển đổi trở lại “-50%” ở trục X. Nó hiển thị hình ảnh ở trung tâm của div theo chiều ngang:
Đó là cách hình ảnh có thể được căn giữa trong div theo chiều ngang.
Phần kết luận
Để đặt hình ảnh theo chiều ngang trong phần tử div, hãy sử dụng “ lề ”, “ mô-đun flex ”, “ bố trí lưới ' Và ' chức vụ ' của cải. Các ' lề ” Thuộc tính trái và phải được đặt thành tự động. “Mô-đun uốn cong” và “Bố cục lưới” đặt màn hình thành dạng uốn cong và lưới tương ứng và sử dụng “ mục đặt “ thuộc tính để căn giữa hình ảnh. Thuộc tính vị trí đặt giá trị tương đối cho lớp gốc và tuyệt đối cho lớp hình ảnh và sử dụng các thuộc tính “trái” và “biến đổi”. Blog này đã trình bày thành công cách căn giữa hình ảnh trong div theo chiều ngang.