在jquery bxslider插件中垂直对齐图像

实际上这应该是微不足道的，但我不能让它工作我正在使用这个漂亮的jquery插件bxslider用于图像的幻灯片，并且图像的大小不同。

当图像在浏览器中呈现时，它们与顶线对齐，我希望它们在中间对齐。

条件的图像

 
 
 
 
 Happy Customers...... 
 
 
 
 
 
 
 
 
 
 
 
  

现在我有一个名为bxslider的jquery插件，它也有自己的样式，但我不认为它会影响它。 但我需要将图像在中间垂直对齐。

CSS

这是css

 $(document).ready( function() { $('.bxslider').bxSlider({ auto: true, slideWidth: 420, minSlides: 2, maxSlides: 3, slideMargin: 10, ticker: true, speed: 6000, tickerHover: true, }); }); 

 .bxslider li { height: auto; } #customers .bxslider .helper { display: inline-block; height: 100%; vertical-align: middle; } #customers .bxslider img { vertical-align: middle; width: 300px; } 

     
 
 
 
 
 Happy Customers...... 
 
 
 
 
 
 
 
 
 
 
 
  

Snippet正在运行，您可以了解问题中的问题。

Answer 1

尝试将display：inline放入以查看是否有效

 #customers .bxslider img { display:inline; vertical-align: middle; width: 300px; } 

http://jsfiddle.net/mqpa6j8e/

Answer 2

这个Flexbox技巧将解决您的问题

 
 
 
 
 #parent { display: flex; } #child { margin: auto; }