CODEWITHSUNDEEP
htmltwitter-bootstrapcsscarousel
ashish
ashish

Reputation: 11

Need the images to be vertical-align middle

I am trying to make the thumbnails in the carousel "vertically aligned in middle" by default. I know there are lot of post on stackflow about the issue and suggested to use : 

vertical-align: middle;

along with 

 display:inline-block;

But the li elements not taking any effect. I don't have any float item either. Can someone please suggest me anything?

Link to jsfiddle: http://jsfiddle.net/ashish_ifb/exfmhk1a/4/

Upvotes: 0

Views: 45

Answers (2)

gopalraju
gopalraju

Reputation: 2309

Solution 1

Try display:table for the ul and table-cell for the li's

Fiddle: http://jsfiddle.net/exfmhk1a/6/

Solution 2

Use position:relative; top:50%;transform:translateY(-50%); for the img

Fiddle: http://jsfiddle.net/exfmhk1a/10/

Upvotes: 2

Muhammet
Muhammet

Reputation: 3308

Easy peasy japanesey, just modify this img selector to:

   .maxcarousel__inner ul li img {
      position: absolute;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100%;
    }

JSFiddle

Upvotes: 0

Related Questions