html - 如何在图像底部放置文本(如宝丽来图像)

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>

这是我使用的CSS代码

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

编辑 1: 这是我得到的样本照片。

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>

请注意，您当前正在 float <img>标签。如果您希望以上内容正常工作，您需要从当前的 CSS 中删除以下内容:

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

您可以 float 您的 <figure> s 代替。