[英]Bootstrap - How to center images from top and bottom side in a bootstrap div class
我無法將所有對齊圖像的頂部填充集中在<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>
注意:圖像應該是響應式的。
這是一種方法:
在這里小提琴: 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;
}
這是因為有一個帶有圖像的p
標簽。
這是:
<p class="caption">Amitabh Bachchan photos from different ages.</p>
height:0
。 喜歡:
.caption {
height: 0;
}
並給像下面的圖像填充:
.profile-pic {
height: 200px;
padding: 10px 0; //here.
}
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.