php - 如何在灯箱画廊中将图像下方的文本居中？

Question

我试图将 this site 上每张图片下方的文本居中但我遇到了问题。

每次我尝试将图像放入 div 时，它都会破坏灯箱画廊。

这是我的相册生成代码:

<?php
class struct
{
    function imageDisplayGallery($img_folder_path)
    {
        //lists all files with _thumbs in folder. stores letter number as key in array called $numbers, and thumbnail as value
        $numbers=array();
        foreach(glob("$img_folder_path*/*_thumb.jpg") as $thumb)
        {
            $thumb=str_replace("%2F","/",urlencode($thumb));
            $thumb=str_replace("+"," ",$thumb);
            $int=explode("/",$thumb)[3].explode("/",$thumb)[4];
            $int=str_replace("Letter %23","",$int);
            $int=str_replace("_thumb.jpg","",$int);
            $numbers[$int]=$thumb;
        }

        //generate code to display image and thumb
            foreach($numbers as $key => $thumb)
        {
            $full=str_replace("_thumb","",$thumb);
            echo '<a href="',$full,'" data-lightbox="roadtrip"><img src="',$thumb,'" /></a>';
            echo "$key";
        }
        echo '<div class="clear"></div>';
    }
}
?>

Answer 1

为每个元素尝试此设置。它使用 CSS flex 布局将图像和文本排列在一列中。文本包裹在 span 元素中并放置在 anchor 元素内。

a {
  display: inline-flex;
  flex-direction: column;
  color: black;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  margin: 10px;
}

<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a>
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a>
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a>
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a>

jsFiddle demo