html - 在 flexbox 的图像下居中文本/内容？

Question

我一直试图在 flexbox 中的垂直对齐图像下添加段落文本，但一直无法将其渲染到下一行。是否可以让文字在图片下方居中？

这是我拥有的:JsFiddle

HTML:

<section class="landing">
  <div class="left-half">
    <article>
      <img src="http://placehold.it/400x600" />
      <div class="text">
        <p>I need this text under the image</p>
      </div>
    </article>
  </div>
</section>

CSS:

.landing {
  display: flex;
}

.left-half {
  flex: 1;
  height: 100vh;
}

.left-half article {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-half article img {
  max-width: 50%;
  display: block;
}

.caption {
  display: block;
}

Answer 1

只需将 .left-half article 设置为 flex-direction:column; :

.left-half article {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

JSFiddle Demo