0

I am creating a carousel slider of images. In there some images/icons are smaller than others. And I want to align all the images/icons in the center without any extra classes for those small images. I was trying vertical-align: middle; or display: inline-block; and so on.

Screenshot_1.png is the example slider and Screenshot_2.png is the slider that I am looking for. Screenshot_1.png Screenshot_2.png

<div id="owl-demo" class="custom-carousel">
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
</div>
Golak Chandra Satiar
  • 159
  • 4
  • 13

2 Answers2

0

One can use the CSS flexbox technology to center items vertically. See the following:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is example code:

<div id="owl-demo" class="custom-carousel" style="display:flex; align-items: center;">
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
  <div class="item"><img src="img.png" alt="img"></div>
</div>

There are also a number of similar Stack Exchange answers including:

How to vertically center a div for all browsers?

How do I vertically center text with CSS?

center vertically the content of a div

Center a DIV horizontally and vertically

Community
  • 1
  • 1
Kolban
  • 10,428
  • 3
  • 26
  • 49
0

This is a simple example that may work for you to just use the inline-block with vertical-align.

.custom-carousel > .item {
    display: inline-block;
    vertical-align: middle;
}

Here is a quick JS Fiddle: http://jsfiddle.net/jtqLL6hd/

Jason W
  • 12,449
  • 2
  • 24
  • 57