javascript - 使用 CSS 水平居中嵌入 HTML 中的 jQuery

Question

我正在尝试使用 CSS 将 ASlider Jquery 插件 ( http://varunnaik.github.io/A-Slider/ ) 居中，我已将其嵌入到我网站的 HTML 代码中。对于我的生活，我不知道该怎么做!

它似乎坚持要留在我页面的左侧。我尝试过使用 float 和 display CSS 元素；他们都没有做任何事情。我什至尝试使用边距和填充，但仍然没有任何反应。见鬼，我迫不及待地想看看 text-align: center; 是否可行，但那也没有任何作用。

这是包含 ASlider 的 CSS 和 HTML 脚本:

.aslider {
  margin: auto;
  float: center;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>

<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
  <div class="aslide" data-duration="5">
    <img src="images/pic1.jpg" width="550px" height="300px">
  </div>
  <div class="aslide" data-duration="5">
    <img src="images/pic2.jpg" width="550px" height="300px">
  </div>
</div>
<!--</div>-->

Answer 1

float: center; 无效，因此您可以将其从 .aslider 中删除。您需要做的就是在 .aslider 中添加一个 width，以便 margin: auto; 生效。

.aslider {
  margin: auto;
  width: 550px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>

<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
  <div class="aslide" data-duration="5">
    <img src="http://placehold.it/550x300" width="550px" height="300px">
  </div>
  <div class="aslide" data-duration="5">
    <img src="http://placehold.it/550x300" width="550px" height="300px">
  </div>
</div>
<!--</div>-->