私の現在のシナリオでは、ブートストラップとcol - * - 4を使って3つの等間隔ブロックが3つずつあります。これらのブロックはちょうどわずかにスタイリングされたサムネイルです(まだブートストラップ3を使用しています)。フレックス(複数の要素)を使った垂直方向と水平方向のセンタリング
私がして配置している底部、でテキストを有するこれらのボックスに:
:position: absolute; bottom:0;
と同様に、この私が使用してDIV内に配置されている上に画像を有しています
height: 400px;
display: flex;
justify-content: center;
align-items: center;
最終的な結果は、この
012であります私の質問は、フレックスを使用する際に固定の高さを使用する代わりに、サムネイルの全領域に画像を中央に配置し、テキストを最後に残す方法です。
サムネイル全体をdisplay:flex
にできますか?
HTML
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="thumbnail grey mb-30">
<div class="img-center">
<img src="img/picto/originals/png/Heart/Newable_Pictogram_CoolGrey_HEART.png" class="img-responsive picto_padding" alt="...">
</div>
<div class="caption">
<h3>Responsibe finance</h3>
<p>We’re the responsible alternative for those who find High Street bank finance difficult to obtain. </p>
</div>
</div>
</div>
CSS
.img-center {
height: 350px;
display: flex;
justify-content: center;
align-items: center;
}
.grey {
background: #f0f0f0;
}
.thumbnail {
border: none;
}
.mb-30 {
margin-bottom: 30px;
}
.thumbnail {
border: none;
min-height: 450px;
position: relative;
}
.caption{
position:absolute;
bottom:0;
}
、それが可能であれば –
は、あなたのコードを追加し、あなたのコードを追加しスニペットやフィドルにそれを追加してください。 [この投稿](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)をご覧ください。 –
可能な複製:http://stackoverflow.com/q/36191516/ 3597276 –