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

Horizontally Centering jQuery embedded in HTML using CSS

本文关键字：水平居中 jQuery HTML CSS 嵌入 使用      更新时间：2023-09-26

我正在尝试使用CSS来集中ASlider Jquery插件(http://varunnaik.github.io/A-Slider/)我已经将其嵌入到我的网站的HTML代码中。我一辈子都不知道该怎么做！

它似乎坚持要留在我页面的左侧。我尝试过使用float和display CSS元素；他们俩都没做任何事。我甚至尝试过使用边距和填充，但还是什么都没发生。见鬼，我非常绝望地想看看text-align: center;是否可行，但这也无济于事。

以下是CSS和HTML中包含ASlider:的脚本

.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>-->

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

通常你可以这样做：

.wrapper{
  width: 100%;
  border: solid;
}
.center{
  border: solid red;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
<div class="wrapper">
  <div class="center">
    This needs to be centered
  </div>
</div>

将图像宽度添加到.aslide类

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

&lt---------------------------编辑------------------------>

最好使用这个：

.aslider{
width:100%;
text-align:center;
margin:0 auto;
}
相关文章：