Here is a possible solution:
jsfiddle: http://jsfiddle.net/38v09vha/
<div class="carousel-inner"> <div class="item"> <img src="http://placehold.it/1200x315" alt="..."> <div class="absolute-div"> <div class="carousel-caption"> <h3>What we Do</h3> </div> </div> </div> <div class="item"> <img src="http://placehold.it/1200x315" alt="..."> <div class="absolute-div"> <div class="carousel-caption"> <h3>What we Do</h3> </div> </div> </div> <div class="item"> <img src="http://placehold.it/1200x315" alt="..."> <div class="absolute-div"> <div class="carousel-caption"> <h3>What we Do</h3> </div> </div> </div> </div>
and css:
.carousel-caption { position: absolute; z-index: 1; display:table; width:100%; height:100%; } .absolute-div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .carousel-caption h3 { display:table-cell; vertical-align: middle; text-align:center; } .item { position:relative; }
Assuming you want them to be vertically aligned in the middle of the image. Basically, you'll want to relatively position the parent div with sliders, which inherits its height from the total height of the image and text. Then you need to create a div that contains the text with the css position: absolute attribute. This element will be a direct child of the positioned parent. This will allow you to fully position the text in the closest relative to the positional element. Check out this CSS Tricks tutorial to see how it works .
This will allow you to position the text above the image, then I went ahead and used the positioning of the table so that you could center them vertically, although you could go and place them in the image wherever you wanted.