Question

我试图制作一个带有一些图标和各自ID的网格。

例如，我有使用bootstrap的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

现在数字将保持在图像下方，但我希望数字与其他数字水平对齐并居中于图像下方。

我该怎么做？

使用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

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

1 个答案: