Positionierung und Styling von Twitter Bootstrap Carousel Bildunterschriften

Question

Ich versuche, die Position von Carousel in der Twitter Bootstrap-Site zu ändern. Was ich versuche ist, die Beschriftung in der Mitte des Bildes zu bringen (Mitte von oben und links ausgerichtet). Es ist gerade unten ausgerichtet.

Der Code ist wie folgt: -

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active" id="home-carousel-inner"> 
     <img src="media/39440/CHI-3-4-2048x1152-v31931.jpg" alt=""> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Another dsdaf headline.</h1> 
      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <a class="btn btn-large btn-primary" href="#">Learn more</a> 
      </div> 
     </div> 

     </div> 
     <div class="item"> 
     <img src="media/39468/CIH-1-2048x1152-v31931.jpg" alt=""> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <a class="btn btn-large btn-primary" href="#">Learn more</a> 
      </div> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="media/32602/CIH-2-2048x1152-1931.jpg" alt=""> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <a class="btn btn-large btn-primary" href="#">Browse gallery</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 

Es so etwas wie dieses würde ...

Im Moment sieht es so aus: -

Answer 1

Sie konnten die Bootstrap .carousel-caption CSS anpassen ..

.carousel-caption { 
     max-width: 550px; 
     padding: 0 20px; 
     margin:0 auto; 
     margin-top: 200px; 
     text-align:center; 
} 

Hier ist ein Bootply zu demonstrieren