在 flexbox 中将带有图像的文本居中

Question

我正在制作一个网页，需要居中对齐 3 个 div 作为宣传内容，像这样：

为了获得这种间距和对齐方式，我添加了不可见的图像，然后隐藏在移动设备上，这样它们就会响应，就像这样：

<div id="promocontent">
  <img class="img-responsive" src="img/iconenope.png">
  <img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
  <img class="img-responsive" src="img/iconenope.png">
  <img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
  <img class="img-responsive" src="img/iconenope.png"><br><br>
</div>

CSS:

#promocontent {
display: flex;                  /* establish flex container */
flex-direction: row;            /* default value; can be omitted */
flex-wrap: nowrap;              /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
padding: 5px;
}

现在，我需要在这些图片的中心底部添加文字，例如：

那么，我该怎么做（响应式工作）？对齐 2 行文本（可能是 1 行，但 2 行会更好）。

谢谢。

Answer 1

#promocontent {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}
#promocontent > div {
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontally center child elements */
  text-align: center;        /* horizontally center text on narrow screens;
                                see  */
}

<div id="promocontent">
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
</div>

https://jsfiddle.net/x2rzj1cu/2/

Answer 2

我会避免使用额外的图像作为间距，而只依赖 justify-content: space-between

有空可以看看我的codepen（和Michaels基本一样）。

http://codepen.io/anon/pen/zKmaVJ

在 flexbox 中将带有图像的文本居中

Center text with images in flexbox

html

css

center

flexbox