所以我正在使用 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 添加到某些地方，但似乎无法弄清楚。
最佳答案
按照我在下面的代码片段中执行的步骤，您应该能够添加标题。
我在 .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>关于html - 如何在图像下方添加标题(图像用于灯箱)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47039672/