如何在图片下方添加标题（图片用于灯箱）答案

【问题标题】：How to add caption underneath image(the image is used for a lightbox)如何在图片下方添加标题（图片用于灯箱）
【发布时间】：2017-10-31 16:00:12
【问题描述】：

所以我使用 Lightbox - Lokesh Dhakar 和我连续 3 张图像，当我点击它们时，它会打开一个灯箱。问题是我只有一个普通的图像，我想在它下面添加一个标题。不是灯箱打开时的标题（我已经有了），而是灯箱打开之前图像下方的标题。

这就是图像代码的样子

<body> 
    <h1>
        <a href="index.html">
        <img class="logo" src="../img/nota.png">
        </a>
    </h1>
<hr>

<section>
<nav>
    <li><a href="index.html" class="button">ARTWORK</a></li>
    <li><a href="logos.html" class="button">LOGOS</a></li>
    <li><a href="other.html" class="button">OTHER</a></li>
    <li><a href="contact.html" class="button">CONTACT</a></li>
</nav>
</section>

    <div class="imgcontainer">
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1" data-title="CENA:"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <script src="../js/lightbox.js"></script>
    <script>
    lightbox.option({'showImageNumberLabel': false})
</script>
    </div>
</body>

我尝试过在某些地方添加 p，但似乎无法弄清楚。

【问题讨论】：

如果您可以包含完整的代码和到目前为止所拥有的工作示例，那将非常有帮助。谢谢
我已经编辑了原帖

标签： html css lightbox caption lightbox2

【解决方案1】：

您应该可以按照我在下面的 sn-p 中采取的步骤添加标题。

我在.lightboximage 中嵌套了一个span 和标题内容。为了在图像下方显示它，我使用了flexbox 属性。

.lightboximage  {
display: inline-flex;
flex-direction: column;
text-decoration: none;
}

.caption {
  font-family: sans-serif;
  color: black;
  font-weight: bold;
  display: inline-block;
  padding-top: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js"></script>


<div class="imgcontainer">
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
</div>

【讨论】：

你解决了！太棒了，非常感谢，我已经被困了几个小时了。