Bootstrap旋轉木馬：向上滑動垂直居中的文字

Question

我將旋轉木馬項目中的文字居中使用display:table-cell和vertical-align: middle。它工作正常，但當幻燈片更改其中的文本顯示在頂部的第一個，然後居中。

這裏是我的代碼 - JSFiddle

如何繼續進行？

Answer 1

您沒有設置任何邊距。我添加了一些項目，它似乎工作。

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