Bootstrap Karussell: schieben Sie vertikal zentrierten Text

Question

Ich habe Text innerhalb Karussell Artikel mit display:table-cell und vertical-align: middle zentriert. Es funktioniert gut, aber wenn sich die Folie ändert, wird der darin enthaltene Text zuerst oben angezeigt und erst dann zentriert.

Hier ist mein Code - JSFiddle

Wie weiter vorgehen?

Answer 1

Sie haben keine Ränder festgelegt. Ich fügte etwas hinzu und es schien zu funktionieren.

https://jsfiddle.net/a76d2q7u/3/

body{ 
    background-color: grey; 
} 
.carousel{ 
    height:200px; 
    display:table; 
    width:100%; 
} 
.carousel-inner{ 
    display:table-cell; 
    vertical-align: middle; 
} 

.item{ 
    text-align: center; 
    font-size: 30px; 
    margin: 17% 0px; 
}