イメージの下部にテキストを配置する方法（ポラロイドイメージのような）

Question

私はポラロイドイメージを作成するのに苦労しています。画像の下部にテキストがあります。私はすべての教訓を試みましたが、失敗しました。

は、ここに私のHTMLコード

<div id="Places" class="gallery"> 
     <ul> 
      <li> 
       <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank"> 
        <img src="images/babot1.jpg" alt="bobat1"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank"> 
        <img src="images/lhouse1.jpg" alt="bobat1"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v" target="_blank"> 
        <img src="images/babot1.jpg" alt="bobat1"> 
       </a> 
      </li> 
     </ul> 
</div> 

であり、これは私が

div.gallery{ 
border:2px solid #ddd; 
margin:0 auto; 
margin-top:100px; 
margin-bottom:30px; 
border-radius:3px; 

width:98%; 
} 
div.gallery::before{ 
content: ""; 
clear: both; 
display: table; 
} 
div.gallery ul{ 
list-style-type:none; 
overflow:hidden; 
margin:0 auto; 
} 
div.gallery li a img { 
margin: 20px 20px 21px 20px; 
width: 28.50%; 
float:left; 
padding-bottom:50px; 
} 

EDIT 1を使用している私のCSSコードです：ここでは 私が得たもののサンプルの写真です。

<figure> 
 
    <img src="myImage.jpg" alt="my image"> 
 
    <figcaption>This is my image</figcaption> 
 
</figure>

Answer 1

<figure> + <figcaption>がこれに対して設計されています。それはポラロイドようにするに

のような、ここで私がやるだろうと何：

figure { 
 
    border: 1px solid #f5f5f5; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12); 
 
} 
 
figure img { 
 
    display: block; 
 
} 
 
figcaption { 
 
    display: block; 
 
    padding: 1rem 0 .5rem; 
 
    color: #777; 
 
}

<figure> 
 
    <img src="http://placehold.it/350x250" /> 
 
    <figcaption>This would be a caption</figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="http://placehold.it/250x350" /> 
 
    <figcaption>This would be another caption</figcaption> 
 
</figure>

あなたが現在<img>タグを浮動していますのでご注意ください。

div.gallery li a img { 
    margin: 20px 20px 21px 20px; 
    width: 28.50%; 
    float:left; 
    padding-bottom:50px; 
} 

あなたが代わりにあなたの<figure> Sをフロートすることができます：あなたが仕事をする上で必要な場合は、あなたの現在のCSSから次を削除する必要があります。

Answer 2

あなたがやりたいことへのHTMLタグがあります高い。

<div id="txt">This is a title</div> 

<style> 
    position: absolute; 
    z-index: 99; 
</style> 

Answer 3

は絶対、divの内側に位置し、あなたのテキストを入れて、それを90のzインデックスを与えるか：