Search code examples
htmlcssflexboxcenter

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.

Solution

  • 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