Flexbox/Bootstrap項目下的圖像文字

Question

我試圖使用flexbox和bootstrap實現下面的圖像。雖然彈出框可以用作響應代碼，但我仍然選擇使用bootstrap。 類= 「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

嘗試將display: flex屬性添加到.container和align-self: baseline到.flex-services類。

這裏有一個小提琴：https://jsfiddle.net/ncsgc3gn/5/

希望它能幫助！