1个div中的flexbox 2元素堆叠

Question

我正在尝试使用flexbox将文本放在div上的/上。尝试了各种各样的东西，但它们仍然表现为单独的弹性项目并且彼此相邻。

问题是，只要Flexbox容器中有多个项目彼此相邻，并且我没有找到一种方法来获取图像的顶部并居中。

除了以下内容之外，我还尝试从.inner中删除flexbox属性，并且很惊讶.inner内部的项目仍然表现为弹性项目。

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，然后将文字绝对放在图像的中心位置。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

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

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

/* NEW */
.inner-item:last-child {
  white-space: nowrap; /* assuming you want text in one line, like in your demo */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

因为我在评论中回答了你的第一个问题。对于你在评论中提到的第二个问题是对的，永远不会使用保证金这是非常糟糕的。 我修改了一些代码以使其更好

＆＃13;

＆＃13;

.header {
  text-align: center;
  min-height:100px;
}

.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;
}

＆＃13;

<div class="header">
<header>
  <h1>Header</h1>
</header>
  </div>
<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>

＆＃13;

＆＃13;

＆＃13;