Center text with images in flexbox

Question

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

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:

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

Thank you.

Michael Benjamin · Answer 1 · 2016-10-18T19:07:42.413

1

#promocontent {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}
#promocontent > div {
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontally center child elements */
  text-align: center;        /* horizontally center text on narrow screens;
                                see http://stackoverflow.com/q/39678610/3597276 */
}

<div id="promocontent">
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
  <div>
    <img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>header text</h2>
    <span>text text text text text</span>
  </div>
</div>

https://jsfiddle.net/x2rzj1cu/2/

edited Oct 18 '16 at 19:07

answered Oct 18 '16 at 18:56

Michael Benjamin

346,931
104
581
701

Can you post more info or a demo of how you want it to be? – Michael Benjamin Oct 18 '16 at 19:08
Your second image looks just like my demo. Where is the difference? – Michael Benjamin Oct 18 '16 at 19:11
(sorry 2 comments) I want to achieve the second image, I don't hve it – MucaP Oct 18 '16 at 19:12
Well, you can see it works in the demo. Maybe post the code from your real page. – Michael Benjamin Oct 18 '16 at 19:15
I've made a fiddle, and yeah, it works. Somewhy, it does not in my page. i'll post the full page code... – MucaP Oct 18 '16 at 19:17
You're complaining about my code, yet the answer you accepted is based entirely on my answer. He even states that in his answer. – Michael Benjamin Oct 18 '16 at 19:50
If you look at my code, you'll notice it's pure flexbox which, *by definition*, is fully responsive. (The images I included were solely for demo purposes because you didn't include any.) – Michael Benjamin Oct 18 '16 at 19:51
Anyway, I'm glad you found your solution. Take care and good luck. – Michael Benjamin Oct 18 '16 at 19:52

score 0 · Accepted Answer · answered Oct 18 '16 at 19:02

0

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

answered Oct 18 '16 at 19:02

ilrein

3,833
4
31
48

Are there any advantages? Like what's wrong with my extra img? – MucaP Oct 18 '16 at 19:07
Nothing, except you're forcing the user to download unnecessary weight. We want as little as possible -- that's design perfection. You can also try ```space-around``` to experiment with the spacing. – ilrein Oct 18 '16 at 19:19

Center text with images in flexbox

2 Answers2