水平设置图像

Question

我正在创建一个旋转木马图片滑块。在那里，一些图像/图标比其他图像/图标小。我希望将所有图像/图标对齐在中心，而不需要为这些小图像添加任何额外的类。我正在尝试vertical-align: middle;或display: inline-block;等等。

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>

Answer 1

可以使用CSS flexbox技术垂直居中项目。请参阅以下内容：

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

以下是示例代码：

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

还有许多类似的Stack Exchange答案，包括：

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

Answer 2

这是一个简单的例子，可以让你只使用带有vertical-align的内联块。

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

这是一个快速的JS小提琴：http://jsfiddle.net/jtqLL6hd/