Jquery Slideshify mit Hyperlink zu einer anderen Seite

Question

Ich benutze Slideshowify in meiner Webseite und möchte einen Hyperlink darüber (ausgerichtet in der Mitte Position), so dass beim Klicken auf den Text Benutzer zu einer anderen Seite umgeleitet wird. Mit jedem Bild wird ein anderer Text angezeigt.

Unten ist der Code-Schnipsel:

$(document).ready(function() { 
 
     $('#slideshow a img').slideshowify(); 
 
});

.spanstyle 
 
{ 
 
    text-align:center; 
 
    color:#FFF; 
 
    font-size: 16px; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/subchild/jquery.slideshowify.js/master/js/jquery.transit.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/subchild/jquery.slideshowify.js/master/js/jquery.slideshowify.min.js"></script> 
 

 
<div id="slideshow"> 
 
      <a href="https://www.google.com"> <span class="spanstyle"> Image 1 </span> <img alt="image1" src="http://www.wallpaperandphoto.com/wp-content/uploads/2016/01/summer_landscape-wallpaper-2560x1600.jpg" style="display: none;"/></a> 
 
      <a href="https://www.stackoverflow.com"> <span class="spanstyle"> Image 2 </span> <img alt="image2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcST9Gcz3vT0LeZpIa6Ch71scJbUY81HjIvKJ5EhbMDxMh9mSLxi" style="display: none;"/></a> 
 
      <a href="https://www.jsfiddle.net"> <span class="spanstyle"> Image 3 </span> <img alt="image3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEg2QvjFNxO7o7KYQb-g5PS_5Y7MK4Oz3G2xapGQKeNetZMVHs" style="display: none;"/></a> 
 
     </div>

Hier alle Hyperlink Texte werden in jedem Bild dargestellt zusammen und ist nicht auf Mitte ausgerichtet. Was mache ich falsch?

Jede Hilfe wird geschätzt.

Answer 1

Versuchen Sie diesen Code wird es helfen, Hypertext in der Mitte des div auszurichten. Bitte passen Sie diese Breite entsprechend Ihrem Linktext an

#slideshow 
    { 
    margin-left: auto; 
    margin-right: auto; 
    width: 172px; 
    }