html - flexbox 1 div 中的 2 个元素堆叠

Question

我正在尝试使用 Flexbox 将文本放在 div 内的图像之上。尝试了各种方法，但它们仍然表现为单独的 flex 元素并且彼此相邻出现。

问题是，每当 Flexbox 容器中有超过 1 个元素彼此相邻出现时，我还没有找到一种方法来让它们位于图像的顶部并居中。

除了下面的内容之外，我还尝试从 .inner 中删除 Flexbox 属性，并且令 .inner 内的元素仍然表现得像 Flex 元素一样令人惊讶。

header {
  text-align: center;
}

.outer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-item {
  position: absolute;
  align-self: center;
}

.inner-img {
  max-width: 100px;
}

footer {
  text-align: center;
  margin-top: 60px;
}

<header>
  <h1>Header</h1>
</header>
<div class="outer">
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
</div>
<footer>
  <h1>Footer</h1>
</footer>

codepen 上的链接 codepen

Answer 1

将.inner设置为position:relative，然后将文本绝对定位在图像的中心。

.outer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.inner-img {
  max-width: 100px;
}

span.inner-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="outer">
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
  <div class="inner">
    <img class="inner-item inner-img" src="http://klequis.com/so/green.circle.svg" />
    <span class="inner-item">Item Text</span>
  </div>
</div>