在一行中對齊元素並在其列中水平居中

Question

我正在嘗試使用一些圖標和它們各自的ID製作網格。

例如，我有這樣的代碼使用引導：

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
rel="stylesheet" /> 
 
<div class="row flex"> 
 
    <div class="col-md-2"> 
 
    <img src="http://placehold.it/300x300" alt="" class="img-responsive"> 
 
    <p class="text-center channel-number">2</p> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <img src="http://placehold.it/300x100" alt="" class="img-responsive"> 
 
    <p class="text-center channel-number">4</p> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <img src="http://placehold.it/300x400" alt="" class="img-responsive"> 
 
    <p class="text-center channel-number">11</p> 
 
    </div> 
 
</div>

現在數量將僅僅停留右圖下，但我要的號碼可水平與其他對齊數字並居中在圖像下方。

我該怎麼做？

使用flex或bootstrap有這樣做的方法嗎？

謝謝！

Fiddle

Answer 1

試試這個：

HTML（無變化）

CSS

.flex { 
    display: flex; 
    min-height: 200px; 
} 

.flex > .col-md-2 { 
    display: flex;     /* create nested flex container */ 
    flex-direction: column;   /* stack children (image and number) vertically */ 
} 

img { margin: auto;}    /* forces numbers to bottom edge of container */ 

Revised Fiddle

這裏瞭解更多關於justify-content和auto邊距：

• Methods for Aligning Flex Items