Question

我已经下载了bootstrap，并在head部分中包含以下代码

<link ref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>

但是我希望我的整个滑块的宽度为100％，图像宽度为80％，但是我的图像虽然我使用了margin-left: auto; margin-right: auto;，却不希望它的中心向右移动。

我的代码是

<div id="the-slider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#the-slider" data-slide-to="0" class="active"></li>
        <li data-target="#the-slider" data-slide-to="1"></li>
        <li data-target="#the-slider" data-slide-to="2"></li>
        <li data-target="#the-slider" data-slide-to="3"></li>
        <li data-target="#the-slider" data-slide-to="4"></li>
        <li data-target="#the-slider" data-slide-to="5"></li>
    </ol>

    <div class="carousel-inner">      
        <div class="item active">
            <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 1-->
        <div class="item">
           <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 2-->
        <div class="item">
           <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 2-->
        <div class="item">
           <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 2-->
        <div class="item">
           <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 2-->
        <div class="item">
           <img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg" class="img-responsive" alt="..." id="img">
        </div> <!--item 2-->
    </div> <!--carousel-inner-->

    <!--controls-->
    <a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div><!--the-slider-->

<!--container-->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
#img {
    width: 80%;
    margin-left: auto;
    margin-right: auto; 
}
#the-slider {
    width: 100%;
}
</style>

你会看到它向右移动，看看附上的照片，看看我的意思。它只是轻微但我需要它的核心！

Answer 1

如果您使用的是 .img-responsive 类，则需要使用 margin：0px auto 来居中。

提示，将您想要的宽度设置为父div，并使用 margin：0px auto;

将图像居中

Answer 2

我试图在JSFiddle上模拟你的问题。对齐应该没有问题：

 img {
    margin: auto auto; 
}

https://jsfiddle.net/e1mw6myL/

我刚收到一些随机图片。第一张图片比其他图片小。
可能是你的图片太大了（ .img-responsive 的最大宽度：100％）

尝试使用其他图片并查看这些图片是否会给您带来同样的问题。

Bootstrap Carousel不居中

2 个答案: