将文档/内容置于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

Answer 2

向flex-wrap: wrap;选择器规则声明.left-half article，然后添加以下样式：

.text {
    flex: 1 1 100%;
    text-align: center;
}

示例：

＆＃13;

＆＃13;

.landing {
  display: flex;
}
.left-half {
  flex: 1;
  height: 100vh;
}
.left-half article {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
  flex-wrap: wrap;
}
.text {
    flex: 1 1 100%;
    text-align: center;
}
.left-half article img {
	max-width: 50%;
}
.right-half {
  	flex: 1;
  	height: 100vh;
}
.right-half article {
	height: 100%;
	width: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}
.right-half .wrapper{
	background-color: #FFFFFF;
}
.right-half .content{
	padding: 15%;
	font-family: 'Playfair Display', serif;
}
.right-half .content h1 {
	font-weight: 900;
	font-size: 48px;
	padding-bottom: 15%;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
}
.right-half .content p{
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 15px;
}

＆＃13;

<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>
	<div class="right-half">
		<article>
			<div class="wrapper">
				<div class="content">
						<h1>This is a title</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet ligula gravida, dignissim purus id, dapibus augue. Maecenas quis semper nulla. Nulla rutrum dignissim diam, quis placerat leo consectetur eget. Maecenas aliquam, nisi et laoreet mollis, elit nulla fermentum enim, at accumsan justo justo et purus. Cras imperdiet ultricies velit. Suspendisse sit amet viverra risus. Nunc eu purus ex. Aliquam nec pulvinar tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum lectus quis quam imperdiet, et egestas tellus convallis. Nunc sed quam ipsum.</p>
							<p>Vivamus bibendum imperdiet congue. Donec gravida lorem turpis, sit amet porttitor massa bibendum tempus. Integer egestas felis ut malesuada dictum. Nunc erat mi, egestas eget diam nec, interdum blandit nulla.</p>
				</div>
			</div>
		</article>
	</div>
		<div style="clear: both;"></div>
    </section>

＆＃13;

＆＃13;

＆＃13;