在堆叠的柔性元件上给出相同的宽度

Question

我正在尝试并排放置img和div元素，然后当浏览器宽度变小时将它们叠加在一起，以使其响应。

我已经设法在某种程度上做到了这一点但是当它们堆叠在彼此之上时，我无法将2个元素的宽度相同。

此外，我无法垂直对齐div中的文本而不是顶部。

这就是我想要实现的目标。

JSfiddle https://jsfiddle.net/31c5vLn6/

代码：

.upperSection{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
.upperBox{
    background-color:white;
    text-align: center;
    verticle-align:middle;
}
.description{
    background-color: white;
}


<div class="upperSection">
        <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
        <div class="upperBox">
            <div class="description">
                <span class="header"><br>Header</span>
                <br><br>
                <span class="text">Text Goes here</span>
            </div>
        </div>
    </div>

Answer 1

＆＃13;

＆＃13;

.upperSection {
  display: flex;
  justify-content: center;
}
.upperBox {
  display: flex;                     /* 1 */
  text-align: center;
  background-color: white;
  
}
.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;                            /* 2 */
  background-color: white;
}
@media (max-width: 500px) {
  .upperSection { flex-wrap: wrap; }
  .upperBox { width: 100%; }          /* 3 */
}

＆＃13;

<div class="upperSection">
  <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
  <div class="upperBox">
    <div class="description">
      <span class="header">Header</span>
      <span class="text">Text Goes here</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

注意：

1. 通过将此元素设为弹性容器，您可以将align-items: stretch应用于该子级。这会为.description提供容器的高度，justify-content则可以使用空间。
2. 与＃1类似，这为元素提供了全宽，使text-align: center空间可用。
3. 由于父级是行方向的弹性容器，flex: 1也适用于此。

Answer 2

你认为 vertical-align：**应该是**中心。