フレキシボックス/ブートストラップアイテム画像

Question

の下で私はフレキシボックスとブートストラップを使用して、以下のこのイメージを達成しようとしています。フレックスボックスが応答コードとして使用することができますが、私はまだそれのためのブートストラップを使用することを選択しました。 クラス= "COL-XS-3"

しかし、ここでは、ということに注意してください、私はこれまで

Fiddle

.services-section { 
 
    background: #414142; 
 
    padding: 20px 50px; 
 
} 
 

 
.services-section .flex-services { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 300px; 
 
} 
 

 
.services-section .flex-services div { 
 
    text-align: center; 
 
    background: #676768; 
 
    padding: 5px; 
 
    flex: 1 1; 
 
    margin: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="services-section"> 
 
    <div class="container"> 
 
    <div class="col-xs-3 flex-services"> 
 
     <div> 
 
     <img class="img img-responsive" src="http://via.placeholder.com/120x120" alt="Services Icon"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 flex-services"> 
 
     <div> 
 
     <img class="img img-responsive" src="http://via.placeholder.com/150x150" alt="Services Icon"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 flex-services"> 
 
     <div> 
 
     <img class="img img-responsive" src="http://via.placeholder.com/200x200" alt="Services Icon"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 flex-services"> 
 
     <div> 
 
     <img class="img img-responsive" src="http://via.placeholder.com/180x180" alt="Services Icon"> 
 
     <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を持っているものだ画像の下のテキスト垂直方向に均等に並んでいる。..

Answer 1

.flex-servicesクラスに.containerとalign-self: baselineにdisplay: flexプロパティを追加してみてください。ここで

はフィドルです：https://jsfiddle.net/ncsgc3gn/5/

はそれが役に立てば幸い！