Question

我正在使用以下标记进行twitter bootstrap，但我遇到的问题是图像是左对齐的，而我希望它们位于中心。有什么明显的东西我错过了吗？

任何帮助都将受到高度赞赏。

感谢。

<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

<!-- Carousel items -->
             <div class="carousel-inner">
             <div class="active item">
             <img src="images/karyotype2.jpg" alt=""/>
             <div class="carousel-caption">
             <h4>First Thumbnail label</h4>
             <p>Text</p>
             </div>
             </div>

             <div class="item">
             <img src="images/Karyotype1.jpg" alt=""/>
             <div class="carousel-caption">
             <h4>Second</h4>
             <p>Text</p>
             </div>
             </div>
             </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>

Answer 1

尝试将此添加到您的CSS：

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

祝你好运！

Answer 2

通过在img标记中添加width="100%"，我发现了一种解决此问题的简单方法

<img src="images/intro1.jpg" alt="" width="100%">

我在旋转木马上有很大的图像。所以这很完美。当浏览器大小发生变化时，图像会自动增大或缩小。

Twitter bootstrap轮播图像

2 个答案: