CSS - thẳng đứng giữa hình ảnh trong một div nổi bật

Tôi đã quyết định ném khăn vào vấn đề này và cần một số trợ giúp :). Theo tiêu đề cố gắng sắp xếp dọc một hình ảnh được bao bọc trong một phần tử neo ở trung tâm của một div chiều cao cố định nổi.CSS - thẳng đứng giữa hình ảnh trong một div nổi bật

Thực hiện rất nhiều googling cho các giải pháp và tủ quần áo tôi có thể nhận được là dưới đây khi div không được thả nổi (tuy nhiên nó cần phải được). Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao!

.class_name { 
/*float: left*/ 
width:153px; 
height:153px; 
margin:3px; 
padding:4px; 
border:1px solid #dedede; 
text-align: center; 
vertical-align: middle; 
background-color: #000; 
display: table-cell; 
} 

<div class="class_name"> 
    <a href=""><img src="image.jpg" alt="" /></a> 
</div>

Nguồn

2010-09-07 Hayden

Bất kỳ ai khác có ý tưởng nào không? – Hayden

Nếu chiều cao cố định và bạn biết kích thước của hình ảnh, chỉ cần định vị hình ảnh theo cách thủ công. Sử dụng position:absolute;top:25px; trên hình ảnh hoặc thứ gì đó tương tự hoặc thêm lề vào hình ảnh: margin:25px 0;.

Nguồn

2010-09-07 02:30:24 mattbasta

Thật không may, hình ảnh có thể có chiều cao khác đôi khi. Cảm ơn mặc dù! – Hayden

Có một giải pháp trình duyệt css chéo cho điều này ở đây có sẵn: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

Nguồn

2010-09-07 02:44:52 Jamie

À vâng tôi đã xem qua điều này. Vẫn còn vấn đề tương tự mặc dù khi nó nổi mà rất bực bội! – Hayden

Vâng, tôi tình cờ gặp vấn đề tương tự đêm qua (đối với một loại bộ sưu tập giống như điều), và quản lý để tìm một giải pháp sau khi vấp ngã vào this page. Tôi vui mừng báo cáo điều này cũng có vẻ làm việc cho các yếu tố nổi!

Bí quyết về cơ bản là cung cấp cho phần tử bên ngoài "display: table;" và phần tử inner (có chứa img) "display: cell table;".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
<style type="text/css"> 
.class_name { 
    display: table; 
    float: left; 
    overflow: hidden; 
    width: 153px; 
    height: 153px; 
} 

.class_name a { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
</style> 
</head> 
<body> 
    <div class="class_name"> 
     <a href=""><img src="image.jpg" alt="" /></a> 
    </div> 
</body> 
</html>

Đối với IE8, bạn cần phải ở chế độ tiêu chuẩn. Một số vị trí bổ sung là cần thiết để làm cho nó hoạt động trong IE7:

<!--[if lte IE 7]><style type="text/css"> 
.class_name { 
    position: relative; 
} 
.class_name a { 
    position: absolute; 
    top: 50%; 
} 
.class_name img { 
    position: relative; 
    top: -50%; 
    width: 100%; 
} 
</style><![endif]-->

Nguồn

2010-10-14 10:23:25 Paul

gọn gàng. Không biết nếu đó là cách tốt nhất nhưng hoạt động tốt đẹp http://www.jsfiddle.net/NgqE2/ – Shikiryu

@Shikiryu Cảm ơn! Nó làm việc cho tôi cuối cùng! – jibiel

Hãy nhớ đặt hình ảnh bên trong một số thẻ khác. Đó là ' 'trong trường hợp này. Nếu không nó sẽ không hoạt động. – Ciwan

CSS - thẳng đứng giữa hình ảnh trong một div nổi bật

Trả lời

Các vấn đề liên quan