从 flex 容器中排除子元素答案

【问题标题】：Excluding child element from flex container从 flex 容器中排除子元素
【发布时间】：2019-03-20 02:19:31
【问题描述】：

<div class="container">
  <div class="image"><img /></div>
  <div class="image"><img /></div>
  <div class="text"></div>
</div>

我有这种情况。我需要将两个图像居中到容器中，但我需要在两个图像下的新行中显示“文本”。我用css做到了

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flexwrap: wrap;
}

.image {
  display: inline-block
}

文本换行，但达到一定的分辨率。如何从弹性流中排除文本？

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
重复 - stackoverflow.com/questions/36470038/…

标签： css sass flexbox centering

【解决方案1】：

设置文字宽度为100%，文字居中对齐：

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.text {
  width: 100%;
  text-align: center;
}

<div class="container">
  <div class="image"><img src="https://picsum.photos/120/80?1"></div>
  <div class="image"><img src="https://picsum.photos/120/80?2"></div>
  <div class="text">Text</div>
</div>

【讨论】：