0

I've centered text inside carousel items with display:table-cell and vertical-align: middle. It works fine but when slide changes the text inside it shows at the top first and only then centered.

Here is my code - JSFiddle

How to proceed further?

Community
  • 1
  • 1
Andriy Lozynskiy
  • 2,444
  • 2
  • 17
  • 35

1 Answers1

1

You don't have any margins set. I added some to item and it seemed to work.

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;
}
Keith
  • 4,059
  • 2
  • 32
  • 56