フレックスボックスのテキストを写真の下に配置する

Question

私はそれがまったく見当たりませんが、フレックスボックスのように見えるような私のテキストには問題があります。フレックスボックスには3つのイメージがありますが、それぞれの下に小さな「キャプション」を配置したいと思います（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ですn私は思い付くことができた。各画像/キャプションをまとめてグループ化したい場合は、別の親にまとめてください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>

ご質問があれば私に教えてください、またはこれはあなたの説明を満たしていない場合。