Come centrare verticalmente un carousel-didascalia Bootstrap?

Question

Ho un carosello di bootstrap e sto cercando di creare una didascalia per la giostra che è sempre centrata verticalmente e posizionata leggermente a sinistra. Ho il css per il posizionamento orizzontale .. ma quando provo a posizionare verticalmente, la didascalia non rimane. Come posso mantenere il carosello-didascalia sempre centrato verticalmente e leggermente a sinistra?

HTML:

<!-- start JumboCarousel --> 
    <div id="jumboCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Indicators --> 
     <ol class="carousel-indicators hidden-xs"> 
      <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#jumboCarousel" data-slide-to="1"></li> 
      <li data-target="#jumboCarousel" data-slide-to="2"></li> 
      <li data-target="#jumboCarousel" data-slide-to="3"></li> 
     </ol><!-- end carousel-indicators --> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active" id="slide1"> 
       <a href="#"><img src="http://placehold.it/1920x720&text=Slide+1" alt="Slide 1"></a> 
       <div class="carousel-caption"> 
        <h1>Check Out this Moose</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide1 --> 
      <div class="item" id="slide2"> 
       <img src="http://placehold.it/1920x720&text=Slide+2" alt="Slide 2"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide2 --> 
      <div class="item" id="slide3"> 
       <img src="http://placehold.it/1920x720&text=Slide+3" alt="Slide 3"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide3 --> 
      <div class="item" id="slide4"> 
       <img src="http://placehold.it/1920x720&text=Slide+4" alt="Slide 4"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <button type="button" href="#" class="btn btn-lg btn-primary">Learn More</button> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide4 --> 
     </div><!-- end carousel-inner --> 

    </div><!-- end jumboCarousel --> 

CSS:

#jumboCarousel { 
    margin-top: 70px; 
    min-height: 300px; 
    min-width: 100%; 
} 
#jumboCarousel img { 
    min-height: 300px; 
    min-width: 100%; 
} 
#jumboCarousel > .carousel-indicators > li { 
    border-radius: 0px; 
    min-width: 25px; 
    background-color: #9d9d9d; 
    border: 1px solid black; 
    margin-right: 10px;; 
    margin-left: 10px;; 
} 
#jumboCarousel > .carousel-indicators > .active { 
    background-color: orange; 
} 
#jumboCarousel .carousel-caption { 
    color: black; 
    right: 58%; 
    text-align: center; 
    max-width: 500px; 
    left: auto; 
    top: auto; 
} 

ogni cosa che faccio per dare la didascalia di un allineamento verticale si è conclusa con la didascalia sempre spinto dalla parte superiore della giostra come lo schermo -dimensione diminuisce .. Grazie per l'aiuto.

Bootply: http://www.bootply.com/aWK6oVRWVo

Answer 1

È possibile utilizzare la funzione translateY della proprietà CSS transform per allineare verticalmente elementi. Browser support è abbastanza decente, incluso IE9. Quindi aggiungi il seguente al tuo .carousel-caption CSS.

top: 50%; 
transform: translateY(-50%); 

Ora è necessario sbarazzarsi del bottom spazio in più, aggiunto dal CSS di default bootstrap. Aggiungi il seguente anche al tuo .carousel-caption CSS.

bottom: initial; 

E, ultimo ma non meno importante dare l'elemento padre, in questo caso .item, il seguente CSS per evitare elementi sfocate quando è collocato su mezzo pixel.

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 

Working Example