以水平設置圖像

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

這是一個簡單的例子，可能會爲你工作，只使用inline-block的垂直對齊。

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

這裏是一個快速JS小提琴：http://jsfiddle.net/jtqLL6hd/

Answer 2

人們可以使用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> 

也有很多類似的協議棧交易所的答案包括：

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