psMiraj psMiraj - 1 year ago 211
HTML Question

Centering text/content under images in flexbox?

I've been attempting to add paragraph text under my vertically aligned image in flexbox, but have been getting trouble getting it to render onto the next line. Is it possible to get the text centered under the image?

Here is what I have: 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 Source

Just set .left-half article to flex-direction:column;:

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

JSFiddle Demo