Positioning text in flexbox under pictures - html

Question

I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#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

Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#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>
Let me know if you have any questions, or if this doesn't satisfy your description.