在 flexbox 中将文本与图像居中

Posted 2023-03-29

【中文标题】在 flexbox 中将文本与图像居中

【英文标题】：Center text with images in flexbox

【发布时间】：2017-02-28 04:18:03

【问题描述】：

我正在制作一个网页，需要将 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 行会更好）。

谢谢。

【参考方案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 http://***.com/q/39678610/3597276 */

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

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

【讨论】：

你能发布更多信息或演示你想要的样子吗？

您的第二张图片看起来就像我的演示。区别在哪里？

(sorry 2 cmets) 我要实现第二张图片，我没有

嗯，你可以在演示中看到它的工作原理。也许从你的真实页面发布代码。

我做了一个小提琴，是的，它可以工作。不知何故，它不在我的页面中。我将发布整页代码...

【参考方案2】：

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

请随意查看我的 codepen（与 Michaels 基本相同）。

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

【讨论】：

有什么优势吗？比如我多余的 img 有什么问题？

没什么，除了你强迫用户下载不必要的重量。我们想要的越少越好——这就是完美的设计。也可以试试space-around 试试间距。