javascript - 带有指向另一页的超链接的 Jquery Slideshowify

Question

我在我的网页中使用 Slideshowify 并希望在其顶部有一个超链接(在中心位置对齐)，以便在单击文本时将用户重定向到另一个页面。每张图片都会显示不同的文字。

下面是片段:

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

这里所有的超链接文本都在每张图片中一起显示，并且没有居中对齐。我做错了什么？

我们将不胜感激。

Answer 1

试试这个代码，它将有助于在 div 的中心对齐超文本。请根据您的链接文本调整此宽度

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