html - 如何让文字位于图像的底部？

Question

我有一个按以下格式转换的无序列表图像，我希望每个图像的底部都有一个文本叠加层。我应该如何正确设置段落 div 的样式以获得所需的结果？文本一直出现在顶部。

<li data-transition="fade">
  <img src="https://i217.photobucket.com/albums/cc312/mastersig/Avitars/For%20Me/C_D_A.png">
                
  <div style="bottom: 10px; left: 19px;font-size: 13px;">
    <p>Some text at the bottom</p>
  </div>
</li>

Answer 1

使用正确的 HTML 元素 - <figure>元素。

虽然所有其他答案确实提供了样式解决方案 - 更好的方法是使用正确的 html 元素 - 在本例中为 HTML5 figure element .这具有作为容器的语义结构来环绕图像和文本元素 - figcaption - 可以是第一个 child (即 - 在图像上方)或最后一个 child - 即 - 在图像下方。

然后，如果需要，您可以将 figcaption 的样式设置为位于图像顶部(如其他解决方案之一所述 - position:relative 在父图形元素上，position absolute 在 figcaption 上)。

.list-item {
  list-style-type: none;
  text-align: center;
}
figure {
  display: inline-block;  
  position: relative;
}

figcaption{
   background-color: wheat;
   position: absolute;
   bottom: 4px;
   left: 0; 
   right:0
}

<li class="list-item" data-transition="fade">
  <figure>
    <img src="https://i217.photobucket.com/albums/cc312/mastersig/Avitars/For%20Me/C_D_A.png">
    <figcaption>Some text at the bottom</figcaption>
  </figure>
   <figure>
    <img src="https://i217.photobucket.com/albums/cc312/mastersig/Avitars/For%20Me/C_D_A.png">
    <figcaption>Some text at the bottom</figcaption>
  </figure>
   <figure>
    <img src="https://i217.photobucket.com/albums/cc312/mastersig/Avitars/For%20Me/C_D_A.png">
    <figcaption>Some text at the bottom</figcaption>
  </figure>
</li>