Карусель Bootstrap: слайд вверх по вертикально центрированному тексту

Я центрировал текст внутри элементов карусели с помощью display:table-cell и vertical-align: middle. Он отлично работает, но когда слайд меняет текст внутри, он сначала отображается вверху, а только затем по центру.

Вот мой код - JSFiddle

Как действовать дальше?


vertical-alignment css twitter-bootstrap-3 bootstrap-carousel
person Andriy Lozynskiy    schedule 04.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас не заданы поля. Я добавил немного в пункт, и это, похоже, сработало.

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;
}
person Keith    schedule 04.10.2016
comment
Спасибо за ваш ответ. Это работает, но только с одной строкой. Мне нужно центрировать текст с разным количеством строк. - person Andriy Lozynskiy; 04.10.2016
comment
и без изменения высоты карусели. - person Andriy Lozynskiy; 04.10.2016