MucaP MucaP - 1 month ago 6
CSS Question

Center text with images in flexbox

I'm making a webpage and need to center-align 3 divs as promo content, like that:

enter image description here

In order to get this spacing and alignment, I added invisible images and made then hidden on mobile, so they get responsive, like that:

<div id="promocontent">
<img class="img-responsive" src="img/iconenope.png">
<img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
<img class="img-responsive" src="img/iconenope.png">
<img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
<img class="img-responsive" src="img/iconenope.png"><br><br>
</div>


CSS:

#promocontent {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
padding: 5px;
}


Now, I need to add text on the center-bottom of these images, something like:

enter image description here

So, how can I do that (responsively working)? Align 2 lines of text (maybe 1, but 2 would be better).

Thank you.

Answer

I would avoid using an extra image for spacing and just rely on justify-content: space-between

Feel free to check out my codepen (basically the same as Michaels).

http://codepen.io/anon/pen/zKmaVJ