カルーセルにセンターアライメントを与える方法はありますか？

Question

カルーセルを中心に揃えようとしていますが、imageのように機能していません。 - col-sm-6 col-md-6あなただけで1個のdivタグを追加した

<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

：

はここにそれのためのHTMLコードです。したがって、ページの最初の6つのセルだけを占有しています。ブートストラップはページを12個のセルに分割します。 3 divタグを使用し、最初にdivの値をcol-sm-3 col-md-3とし、次にdivをもう1つ追加し、別の空きを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> 

ための完全に機能的なコードである