ブートストラップカルーセルのセンタリング

Question

テキスト情報の後に私のホームページにブートストラップカルーセルを作成しました。私は私のページに大きなカルーセルが欲しくないので、私は<div class="col-sm-6">を使ってサイズを減らしました。 しかし、私のカルーセルはページの左側に配置されており、私は中心に置くことができませんでした。私は私のページの中心にそれを持っていたいと思います。 私が使用したコード：

<div class="container"> 
<h4 class="text-justify">text here </h4> 
</div> 

<div class="container"> 
    <div class="col-sm-6"> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div> 
      <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div> 
      </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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> 

私のCSSコード

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
     width: 100%; 
     margin: auto; 
      } 

がどのように位置を変更することができたのか？

Answer 1

まずあなたは、あなたは、単にあなたの最終的なコードは次のようになりますクラス「COL-中心」を追加し、以下のCSS

.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 

を追加することができ、行の内側にあなたのCOL-SM-6を配置する必要があります：

<div class="container"> 
    <h4 class="text-justify">text here </h4> 
</div> 

<div class="container"> 
<div class="row"> 
<div class="col-sm-6 col-centered"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div> 
     <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div> 
     </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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> 
</div> 

Answer 2

このスタイルを適用します。これは以下のコードで動作します。

<div class="col-sm-6" style=" 
    margin: 0 auto; 
    float: none;">