Wie zentriert man den Text unter dem Bild in der Lightbox-Galerie?

Question

Ich versuche, den Text unter jedem Bild auf this site zu zentrieren, aber ich stoße auf Probleme.

Jedes Mal, wenn ich versuche, ein Bild in eine div setzen, bricht es die Lightbox-Galerie.

Hier ist meine Fotogalerie Generation Code:

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

Versuchen Sie dieses Set-up für jedes Element. Es verwendet CSS Flex-Layout, um das Bild und den Text in einer Spalte anzuordnen. Der Text wird in ein span Element eingepackt und in das Ankerelement platziert.

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