Bootstrap - 如何在引导 div 类中从顶部和底部居中图像答案

【问题标题】：Bootstrap - How to center images from top and bottom side in a bootstrap div classBootstrap - 如何在引导 div 类中从顶部和底部居中图像
【发布时间】：2016-05-26 04:26:38
【问题描述】：

我无法将 <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>

注意：图像应该是响应式的。

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

.parent{
    position: relative;
}

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

【讨论】：

【解决方案2】：

这是因为有一个带有图像的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

【讨论】：

【解决方案3】：

这是一种方法：

在这里提琴：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;
}

【讨论】：