Centering button over Bootstrap 3 carousel

css, html, twitter-bootstrap, twitter-bootstrap-3

Solution

You need to wrap in column and add `text-center` class :

Fiddle : http://bootply.com/112692

Extract :

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

Problem

I'm trying to center a button over a bootstrap 3 carousel, this button is hovering above the carousel. I tried to wrap the button in a div class and center it with either text-align: center; or margin: 0 auto; without succes. I can manually set margin-left of the .hover-class; this will work, but it's not perfectly centered. How to center my button? This is my code: 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> ``` My 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;} ```

Original source