Question

我使用twitter-bootstrap做了一个旋转木马，它显示了几张照片。问题是，所有图片都是不同的尺寸，而且现在，它们并不是居中的。有没有一种方法可以在所涉及的图片发生变化时，旋转木马可以重新调整大小以使每张图片水平和垂直居中？

到目前为止，这是代码：

<div class="modal-body">
  <div id="picture-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#picture-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#picture-carousel" data-slide-to="1"></li>
      <li data-target="#picture-carousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="/images/picture-1.jpg" alt="" />
        <div class="carousel-caption">
          <p></p>
        </div>
      </div>
      <div class="item">
        <img src="/images/picture-2.jpg" alt="" />
        <div class="carousel-caption">
          <p></p>
        </div>
      </div>
      <div class="item">
        <img src="/images/picture-3.jpg" alt="" />
        <div class="carousel-caption">
          <p></p>
        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#picture-carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#picture-carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div> <!--Carousel-->
</div> <!--modal-body-->

感谢您提供的所有提示！

Answer 1

使用此样式居中图像： -

div.carousel-inner img{
    margin: 0 auto;
}

图片不以旋转木马为中心

1 个答案: