在父div的垂直對齊圖像與css

Question

所以我想垂直對齊圖像在一個容器div內。我嘗試添加vertical-align：middle;到沒有運氣的父母div。

<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

我會做的是設置圖像作爲背景圖像。

.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

試試這個：

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;} 

靈感來自：Lost in the Woods vertically centering with CSS。