Hình ảnh căn chỉnh dọc trong div cha với css

Question

Vì vậy, tôi đang cố gắng căn chỉnh hình ảnh dọc trong div vùng chứa. Tôi đã thử thêm vertical-align: middle; cho div phụ huynh không có may mắn.

<div class="contributor_thumbnail"><img src="image.jpg"></div> 
    <div class="contributor_thumbnail"><img src="image.jpg"></div> 

.contributor_thumbnail { 

    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    vertical-align: middle; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 

Answer 1

Những gì tôi sẽ làm là thiết lập hình ảnh làm hình nền.

.contributor_thumbnail { 
    /* Background image instead of using and img tag */ 
    background: url(image.jpg) center center no-repeat; 
    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 

Answer 2

.contributor_thumbnail img { 
    margin-left: auto; 
    margin-right: auto; 
} 

http://www.bluerobot.com/web/css/center1.html

Answer 3

Hãy thử điều này:

HTML

<div class="contributor_thumbnail"> 
<div class="content"> 
    <img src="image.jpg"> 
</div> 
</div> 

CSS:

.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;} 
.content {clear:both; height:240px; position:relative;} 

Lấy cảm hứng từ: Lost in the Woods vertically centering with CSS.