在一行中对齐元素并在其列中水平居中

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