CODEWITHSUNDEEP
csstwitter-bootstrap-3vertical-alignmentbootstrap-carousel
Andriy Lozynskiy
Andriy Lozynskiy

Reputation: 2604

Bootstrap carousel: slide up vertically centered text

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?

Upvotes: 0

Views: 604

Answers (1)

Keith
Keith

Reputation: 4147

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

Upvotes: 1

Related Questions