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

Question

我正在尝试制作一个包含一些图标及其各自 ID 的网格。

例如，我有这段代码使用 bootstrap:

.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 边距的更多信息：

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

Align elements in a row and horizontally centered in their column

html

css

flexbox

twitter-bootstrap