Question

我有简单的jQuery幻灯片，但我无法解决如何水平居中对齐alt标签文本，以便在图像不显示alt标签文本时居中。我可以使用text-align：center;这有效，直到jQuery重复幻灯片，此时alt文本左对齐并从那里继续左对齐。

＆＃13;

$(function() {
  $('#slideshow img:gt(0)').hide();
  setInterval(function() {
    $('#slideshow :first-child')
      .fadeOut(0) // 1000
      .next('img')
      .fadeIn(0)
      .end()
      .appendTo('#slideshow');
  }, 3000);
});

＆＃13;

#slideshow-wrapper {
    max-width: 476px;
    text-align: center;
    margin: 0 auto 16px auto;
}

#slideshow {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 80.67226890%;
}

#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slideshow-wrapper">
  <div id="slideshow">
    <img src="images1.png" alt="Alt tag text for image 1">
    <img src="images2.png" alt="Alt tag text for image 2">
    <img src="images3.png" alt="Alt tag text for image 13">
    <img src="images4.png" alt="Alt tag text for image 14">
  </div>
</div>

＆＃13;

我继续努力解决这个问题。这是我发布问题后所做的事情。我已经安装了Chrome并运行了代码片段，实际上它确实将幻灯片开头的文本居中，当jQuery重复播放幻灯片时，我还注意到它在alt文本周围放置了一些与文本长度相匹配的边框并想知道这是否有效。我试过直接在jQuery中添加css而不是样式表，如下所示：

$('#slideshow :first-child').css({'text-align': 'center'})

并在不同的地方尝试过，但它只能在jQuery开始重复幻灯片之前一直有效。我也注意到img标签中的Width和Height值可以有效，但它似乎只生成一个关于前3或4个字符的小方块大小的文本。我已编辑此帖子以包含这些发现，因为它们有助于了解提供适用于IE和Firefox的解决方案。

如何在IE和Firefox中找到alt标签文本，不仅仅是在幻灯片的开头，还有jQuery重复幻灯片的时候。

jquery .appendTo幻灯片放映如何居中alt标记文字

0 个答案: