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