Bootstrap - 如何在自舉div類中將圖像從頂部和底部居中放置

Question

我無法爲所有對齊的圖像居中頂部填充<div class="photos text-center"> 我已經爲div設置了背景。所以在集中來自各方的圖像之後它看起來像邊框。請找到下面的代碼鏈接。

http://codepen.io/devendrasingh/pen/dGroGM

<div class="container"> 
    <div class="heading text-center"> 
    <h1 class="heading">Amitabh Bachchan</h1> 
     <h5 class="heading">Shahenshah of Bollywood</h5> 
</div> 
    <div class="photos text-center"> 
     <img src="http://i2.wp.com/celebritykick.com/wordpress/wp-content/uploads/2015/01/Amitabh-Bachchan-Childhood-pictures-1a.jpg" class="profile-pic image-responsive"> 
     <img src="http://4.bp.blogspot.com/-M406xYLxmxQ/TiP6cAVINQI/AAAAAAAABI4/WR5cdWO1h0s/s1600/4.jpg" class="profile-pic image-responsive"> 
     <img src="http://4.bp.blogspot.com/-TPBdiYqY2N4/TiP7S-QyKEI/AAAAAAAABJc/_WWCsdLZfIM/s1600/d.jpg" class="profile-pic image-responsive"> 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/d0/23/e1/d023e15529ee609aec540e354b0617ef.jpg" class="profile-pic image-responsive"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Amitabh_Bachchan_December_2013.png/220px-Amitabh_Bachchan_December_2013.png" class="profile-pic image-responsive"> 
<p class="caption">Amitabh Bachchan photos from different ages.</p> 
</div> 

注意：圖片應響應。

Answer 1

這是becau如果有一個帶圖像的p標籤。

那就是：

<p class="caption">Amitabh Bachchan photos from different ages.</p> 

要在那裏height:0。像：

.caption { 
    height: 0; 
} 

並給予填充圖像樣以下幾點：

.profile-pic { 
    height: 200px; 
    padding: 10px 0; //here. 
} 

Working Fiddle

Answer 2

這是做這件事：

小提琴這裏：http://jsfiddle.net/4Mvan/1/

HTML：

<div class='container'> 
    <a href='#'> 
    <img class='resize_fit_center' 
     src='http://i.imgur.com/H9lpVkZ.jpg' /> 
    </a> 
</div> 

CSS：

.container { 
    margin: 10px; 
    width: 115px; 
    height: 115px; 
    line-height: 115px; 
    text-align: center; 
    border: 1px solid red; 
} 
.resize_fit_center { 
    max-width:100%; 
    max-height:100%; 
    vertical-align: middle; 
} 

Answer 3

.parent{ 
    position: relative; 
} 

.child{ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}