我无法将 <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>
注意:图片应该是响应式的。
最佳答案
因为有一个p
标签带图片。
这是:
<p class="caption">Amitabh Bachchan photos from different ages.</p>
让 height:0
。喜欢:
.caption {
height: 0;
}
然后像下面这样给图像填充:
.profile-pic {
height: 200px;
padding: 10px 0; //here.
}
关于jquery - Bootstrap - 如何在 bootstrap div 类中将图像从顶部和底部居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35406351/