Позиционирование текста в flexbox под картинками

Question

У меня возникает проблема с моим текстом, где я его вообще не вижу, или это не так, как если бы я думал, что это будет в flexbox. У меня есть три изображения в flexbox прямо сейчас, но я хотел бы разместить маленькие подписи под каждым из них (не в элементе p, фиолетовый, но я бы хотел поместить его на белый, который находится прямо под фиолетовый ящик (элемент p) .Я думал, что добавив дочерний элемент, этот элемент по крайней мере выровнялся бы вертикально с элементом выше него, но я думаю, что я ошибаюсь. Может ли кто-нибудь помочь? Еще одна информация о том, что действительно мой изображения 250 пикселей, но я хотел, чтобы приспособить для сниппета, так что я сделал это на 50 пикселей, но это, вероятно, не имеет значения.

#footer { 
 
    display: flex; 
 
    height: 130px; 
 
    width: 100%; 
 
    background-color: #862d59; 
 
    clear: both; 
 
} 
 

 
#footer, #wrapper:after{ 
 
    height: 130px; 
 
} 
 

 
.wrap { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.sub { 
 
    padding: 12px; 
 
    width: 32%; 
 
    height: 100px; 
 
    color: white; 
 
    border-right: solid white 1px; 
 
} 
 

 
.sub:last-child { 
 
    border: 0px; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    margin:0; 
 
    font-family: courier; 
 
    font-size: 22px; 
 
    color: white; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 85%; 
 
    min-height: 100%; 
 
    margin-top: -130px; 
 
} 
 

 
#inner { 
 
    position:absolute; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    height: 600px; 
 
    top:50%; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    margin-top: -300px; 
 
    align-content: center; 
 
    width: 100%; 
 
} 
 

 
#inner p { 
 
    background-color: #26004d; 
 
    padding: 60px; 
 
    border-radius: 9px; 
 
} 
 

 
#inner img { 
 
    border-radius: 8px; 
 
}

<div id="wrapper"> 
 
    <div id="inner"> 
 
    <p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p> 
 
    <p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p> 
 
    <p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <div class="wrap"> 
 
    <div class="sub"></div> 
 
    <div class="sub"></div> 
 
    <div class="sub"></div> 
 
    </div> 
 
</div>

Answer 1

Без дополнительной информации/изображения, вот Solutio Я смог придумать. Если вы хотите, чтобы каждый образ/подпись группировались вместе, заверните их в другой родительский div. Затем просто добавьте надпись ниже, которая является элементом block и должна проходить под изображением, как и предполагалось. Ниже приведен фрагмент.

#footer { 
 
    display: flex; 
 
    height: 130px; 
 
    width: 100%; 
 
    background-color: #862d59; 
 
    clear: both; 
 
} 
 

 
#footer, #wrapper:after{ 
 
    height: 130px; 
 
} 
 

 
.wrap { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.sub { 
 
    padding: 12px; 
 
    width: 32%; 
 
    height: 100px; 
 
    color: white; 
 
    border-right: solid white 1px; 
 
} 
 

 
.sub:last-child { 
 
    border: 0px; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    margin:0; 
 
    font-family: courier; 
 
    font-size: 22px; 
 
    color: white; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 85%; 
 
    min-height: 100%; 
 
} 
 

 
#inner { 
 
    position:absolute; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    height: 600px; 
 
    top:50%; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    margin-top: -300px; 
 
    align-content: center; 
 
    width: 100%; 
 
} 
 

 
#inner p { 
 
    background-color: #26004d; 
 
    padding: 60px; 
 
    border-radius: 9px; 
 
} 
 

 
#inner p.caption { 
 
    color: #000; 
 
    background-color: transparent; 
 
    border-radius: 0; 
 
} 
 

 
#inner img { 
 
    display: block; 
 
    border-radius: 8px; 
 
}

<div id="wrapper"> 
 
    <div id="inner"> 
 
    <div class="image-wrapper"> 
 
     <p> 
 
     <img src="http://placehold.it/100x100" alt="Picture of a cat"> 
 
     </p> 
 
     <p class="caption">Caption</p> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
     <p> 
 
     <img src="http://placehold.it/100x100" alt="Picture of a cat"> 
 
     </p> 
 
     <p class="caption">Caption</p> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
     <p> 
 
     <img src="http://placehold.it/100x100" alt="Picture of a cat"> 
 
     </p> 
 
     <p class="caption">Caption</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <div class="wrap"> 
 
    <div class="sub"></div> 
 
    <div class="sub"></div> 
 
    <div class="sub"></div> 
 
    </div> 
 
</div>

Позвольте мне знать, если у вас есть какие-либо вопросы, или если это не удовлетворяет ваше описание.