Как я могу дать центрирование в карусели?

Question

Я пытаюсь привести мою карусель в центр, но она не работает, как показано на рисунке image.

Вот HTML код для него:

<div class="c-wrapper" position="absolute" align="center"> 
     <div class="col-sm-6 col-md-6" position="absolute" align="center"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" margin: auto; width: 500px; position="absolute" align="center"> 

       <ol class="carousel-indicators"> 
        <li data-target="#carousel-example-generic" data-slide-to="0" 
         class="active"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
       </ol> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="img/temple.jpg" alt="temple" class="img-responsive";> 
        </div> 
        <div class="item"> 
         <img src="img/harmonium.jpg" alt="harmonium" 
          class="img-responsive";> 
        </div> 
        <div class="item"> 
         <img src="img/tabla.jpg" alt="tabla" class="img-responsive"> 
        </div> 
       </div> 
       <a class="left carousel-control" href="#carousel-example-generic" 
        role="button" data-slide="prev"> <span 
        class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
       </a> <a class="right carousel-control" href="#carousel-example-generic" 
        role="button" data-slide="next"> <span 
        class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
    </div> 

Answer 1

Вы только добавили один div тег - col-sm-6 col-md-6. поэтому он занимает только первые шесть ячеек страницы. Bootstrap делит страницу на 12 ячеек. поэтому используйте теги 3 div и сначала пустые div со значением col-sm-3 col-md-3, а затем вторым div у вас уже есть и добавьте еще один пустой div со значением col-sm-3 col-md-3.

<div class="col-sm-6 col-md-6"> 
     | 
     | 
</div> 

Answer 2

Здесь полностью функциональный код каруселью

<div class="col-md-12 col-lg-12"> 
    <div class="col-md-6 col-lg-6" style="margin-left: 25%;"> 
     <div id="carousel-example-generic" class="carousel slide" 
      data-ride="carousel" data-interval="5000"> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" 
        class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="img/temple.jpg" alt="temple" class="img-responsive";> 
       </div> 
       <div class="item"> 
        <img src="img/harmonium.jpg" alt="harmonium" class="img-responsive";> 
       </div> 
       <div class="item"> 
        <img src="img/tabla.jpg" alt="tabla" class="img-responsive"> 
       </div> 
      </div> 
      <a class="left carousel-control" 
       data-target="#carousel-example-generic" role="button" 
       data-slide="prev"> <span 
       class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> <a class="right carousel-control" 
       data-target="#carousel-example-generic" role="button" 
       data-slide="next"> <span 
       class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      <h4> 
     <p class="text-center">  <figcaption>culpa qui officia deserunt mollitia</figcaption> </p> 
      </h4> 
     </div> 
    </div> 
</div>