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