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元素中，并放在锚元素内。

＆＃13;

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

＆＃13;

<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>

＆＃13;

jsFiddle demo

如何将文本放在灯箱库中的图像中心？

1 个答案: