居中引導傳送帶

我在我的主頁中創建了一個引導傳送帶，之後是一些文本信息。我不想在我的網頁中放置一個大型輪播，因此我使用<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; 
      }

我怎樣才能改變位置？

來源

2016-09-16 Paul

這裏http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 –

首先，你必須把你的COL-SM-6連續在內線，那麼你可以簡單地添加一個類「山口爲中心」，並添加以下CSS

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

你的最終代碼會是這樣：

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

來源

2016-09-16 15:27:30

感謝一下！它工作得很好。 – Paul

應用此樣式。這下面的代碼將工作。

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

來源

2016-09-16 15:31:17 satheeshk

謝謝@satheeshk，它也可以工作！ – Paul

居中引導傳送帶

回答

相關問題