居中引导传送带

我在我的主页中创建了一个引导传送带，之后是一些文本信息。我不想在我的网页中放置一个大型轮播，因此我使用<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

居中引导传送带

回答

相关问题