Come centrare verticalmente una didascalia del carosello Bootstrap?

Ho un carosello di bootstrap e sto cercando di creare una didascalia per la giostra che sia 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:

  

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

tutto ciò che faccio per dare alla didascalia un allineamento verticale si è concluso con la didascalia che viene spinta fuori dalla parte superiore della giostra mentre le dimensioni dello schermo diminuiscono .. Grazie per l’aiuto.

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

È ansible utilizzare la funzione translateY della transform proprietà CSS per allineare verticalmente gli elementi. Il supporto del browser è abbastanza accettabile, incluso IE9. Quindi aggiungi semplicemente quanto segue al tuo .carousel-caption CSS.

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

Ora devi liberarti dello spazio in più, aggiunto dal CSS di bootstrap predefinito. Aggiungi il seguente anche al tuo CSS .carousel-caption .

 bottom: initial; 

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

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

Esempio di lavoro