Text/Inhalt unter Bildern in der Flexbox zentrieren?

Question

Ich habe versucht, Absatztext unter meinem vertikal ausgerichteten Bild in Flexbox hinzuzufügen, habe aber Probleme damit, es in die nächste Zeile zu rendern. Ist es möglich, den Text unter dem Bild zentriert zu bekommen? Hier

ist, was ich habe: 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

Deklarieren flex-wrap: wrap; zu Ihrem .left-half article Selektor Regel fügen Sie dann die folgenden Arten:

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

Beispiel:

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

<section class="landing"> 
 
\t <div class="left-half"> 
 
\t \t <article> 
 
\t \t \t <img src="http://placehold.it/400x600"/> 
 
\t \t \t <div class="text"> 
 
\t \t \t \t <p>I need this text under the image</p> 
 
\t \t \t </div> 
 
\t \t </article> 
 
\t </div> 
 
\t <div class="right-half"> 
 
\t \t <article> 
 
\t \t \t <div class="wrapper"> 
 
\t \t \t \t <div class="content"> 
 
\t \t \t \t \t \t <h1>This is a title</h1> 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </article> 
 
\t </div> 
 
\t \t <div style="clear: both;"></div> 
 
    </section>

Answer 2

Stellen Sie einfach .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