центр текста с изображениями в Flexbox

Question

Я сделать веб-страницу и нужен центр выравнивать 3 дивы как промо-контент, как, что:

Для того, чтобы получить этот интервал и выравнивание, я добавил невидимые изображения и сделал то спрятан на мобильном телефоне, так что они получают в ответ, как это:

<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; 
} 

Теперь мне нужно добавить текст на центральной нижней части этих изображений, что-то вроде:

Итак, как я могу сделать это (ответно работает)? Выровняйте 2 строки текста (возможно, 1, но 2 будет лучше).

спасибо.

Answer 1

Я бы не использовать дополнительное изображение для расстояния и полагаться только на justify-content: space-between

Не стесняйтесь проверить мой codepen (в основном так же, как Michaels) ,

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

Answer 2

#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/