Sắp thẳng hàng hình ảnh trong khi bẻ ra khỏi thùng chứa

Question

Được rồi, vì vậy tôi có các giải pháp khác nhau cho các yếu tố sắp xếp theo chiều dọc của chiều cao tùy ý trong một vùng chứa. Tất cả các công việc này khi nội dung có chiều cao nhỏ hơn so với vùng chứa.

Điều gì sẽ xảy ra nếu chiều cao nội dung cao hơn vùng chứa? Ví dụ: giả sử tôi có vùng chứa có chiều cao cố định là 100px. Tôi cũng có một số hình ảnh có độ cao khác nhau; Tôi cần phải căn chỉnh theo chiều dọc những điểm này sao cho điểm trung tâm của hình ảnh khớp với điểm trung tâm của vùng chứa, như vậy:

(không thể tải lên hình ảnh như tôi chưa đủ rõ ràng) - ví dụ: http://gbradley.com/_images/stuff/valign.png

Không xác định vị trí của hình ảnh theo cách thủ công, làm cách nào tôi có thể đạt được điều này? Tôi cảm thấy như tôi đang thiếu một cái gì đó khá rõ ràng.

Answer 1

Nếu bạn không cần trình duyệt IE ít hơn 8 và trong chế độ tiêu chuẩn, bạn có thể sử dụng lợi nhuận tiêu cực lớn và helper giả yếu tố: http://jsfiddle.net/kizu/CXRVn/

Nếu bạn cần cũ IE, bạn có thể sử dụng một cách khác, sử dụng helper phần tử có chiều cao lớn và một số quirks định vị: http://jsfiddle.net/kizu/CXRVn/5/

Ở đó, bạn phải đặt giá trị chênh lệch âm lớn nhất là .image bằng một nửa chiều cao của người trợ giúp trừ đi một nửa chiều cao của cha mẹ. Hoạt động trong IE6 hoặc là :)