Question

我尝试过很多东西来固定这个滑块。这包括align =＆＃34; center＆＃34; style =＆＃34; margin：0 auto;＆＃34; style =＆＃34; margin-right：0 auto; margin-left：0 auto;＆＃34;。所有这些我都试过了图像和滑块div。我不确定问题是什么，任何帮助都会非常感激。这是我第一次发帖，如果这不是正确的格式，那就很抱歉。以下是我遇到问题的代码

＆＃13;

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

＆＃13;

  #slideshow {
    margin: 0px auto;
    position: relative;
    max-width: 1200px;
    height: 720px;
    <!-- padding: 10px;
    --> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  }
  .ppt img {
    margin-left: -50%;
  }
  .ppt li {
    left: 50%;
  }
  #slideshow > div {
    position: absolute;
  }
  .clear {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <div id="slideshow">
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
    <div>
      <img style="height:719;" src="image.jpg">
    </div>
  </div>
</div>

＆＃13;

Answer 1

幻灯片显示居中。它的图像本身并不是中心的。你可以在jsfiddle中看到这方面的证据。使图像居中将更多地与您的绝对定位有关。如果是目标，您可以使用left: 50%; transform: translate(-50%, 0);将图像居中。

Answer 2

首先，一堆不良做法：

内联太多
滑块内不需要div。试试一个清单。更好代码管理。

现在问题。你可以简单地使用

margin: auto;

让#slideshow水平居中。

我的滑块不能居中

2 个答案: