2013-05-31 7 views
1

J'utilise le balisage suivant pour le bootstrap de Twitter mais le problème que j'ai est que les images sont justifiées à gauche alors que je les aimerais au centre. Y a-t-il quelque chose d'évident que j'ai raté?Twitter bootstrap carousel image

Toute aide sera grandement appréciée.

Merci.

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

Répondre

2

Essayez d'ajouter ceci à votre CSS:

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

Bonne chance!

1

J'ai trouvé un moyen très facile de résoudre ce problème dans mon cas, par ajout width="100%" dans la balise img

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

J'ai de grandes images dans le carrousel. donc cela fonctionne parfaitement. Lorsque la taille du navigateur change, les images augmentent ou rétrécissent automatiquement.

Questions connexes