Кнопка центрирования над бутстрапом 3 карусели

Question

Я пытаюсь центрировать кнопку над каретой 3 бутстрапа, эта кнопка висит над карусели.

Я попытался обернуть кнопку в классе div и центрировать ее либо с выравниванием текста: по центру; или margin: 0 auto; без успеха.

Я могу вручную установить margin-left из класса hover; это будет работать, но это не идеально по центру. Как центрировать мою кнопку?

Это мой код:

HTML:

<!--The slider--> 
<section> 
    <div class="hover-slide"> 
      <a href="#page-intro" class="btn btn-default start-me">Let's go</a> 
    </div> 
    <div id="slider-top" class="carousel slide" data-ride="carousel"> 

     <!--Indicators--> 
     <ol class="carousel-indicators"> 
      <li data-target="#slider-top" data-slide-to="0" class="active"></li> 
      <li data-target="#slider-top" data-slide-to="1"></li> 
      <!--<li data-target="#slider-top" data-slide-to="2"></li>--> 
     </ol> 


    <!--Wrapper for the the slide--> 
    <div class="carousel-inner"> 
     <!--specify first slide--> 
     <div class="item active"> 
      <img src="img/01.jpg" alt="Foto1"> 
      <div class="carousel-caption"> 
       <h3>TEST</h3> 
      </div> 
     </div> 
     <!--specify second slide--> 
     <div class="item"> 
      <img src="img/02.jpg" alt="Foto2"> 
      <div class="carousel-caption"> 
       <!--<a href="#page-intro" class="btn btn-default start-me">Let's go</a>--> 
       <h3>TEST SLIDE 2</h3> 
      </div> 

     </div> 
    </div> 

     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 

</div> 

Мой CSS:

.hover-slide { 
    position: absolute; 
    /*margin-left: 30%;*/ 
    z-index: 10; 
} 


.carousel .item { 
    width: 100%; 
    height: 100%; 
} 

.carousel .item img { 
    width: 100%; 
    height: 100%; 
} 

.btn.start-me {margin: 0 auto;} 

Answer 1

Вам нужно обернуть в колонку и добавить text-center класс:

Fiddle: http://bootply.com/112692

Экстракт:

<section> 
    <div class="col-md-12 hover-slide text-center"> // <------ HERE 
      <a href="#page-intro" class="btn btn-default start-me">Let's go</a> 
    </div> 
    <div id="slider-top" class="carousel slide col-md-12" data-ride="carousel"> // <------ HERE 

     <ol class="carousel-indicators"> 
      <li data-target="#slider-top" data-slide-to="0" class="active"></li> 
      <li data-target="#slider-top" data-slide-to="1"></li> 
      <!--<li data-target="#slider-top" data-slide-to="2"></li>--> 
     </ol>