图片不在轮播中居中

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