psMiraj psMiraj - 6 months ago 88
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

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