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

Question

所以我正在使用 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 添加到某些地方，但似乎无法弄清楚。

Answer 1

您应该可以按照我在下面的代码片段中执行的步骤添加说明文字。

我在 .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>

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

How to add caption underneath image(the image is used for a lightbox)

html

css

lightbox

caption

lightbox2