在jquery bxslider插件中垂直對齊圖像

Question

其實這應該是微不足道的，但我不能得到它的工作我使用這個漂亮的jquery插件bxslider爲圖像的幻燈片和圖像的大小不同。

當圖像在瀏覽器中呈現時，它們與頂線對齊，我希望它們在中間對齊。

Image of the condition

   <article id='customers'> 
       <div class='wrapper'> 
        <div class='container'> 
         <div class='col-md-12 col-sm-12'> 
          <h1 class='text-center'> Happy Customers...... </h1> 
          <ul class='bxslider'> 
           <li><span class="helper"></span><img src='logo.png' class='img-responsive'></li> 
           <li><span class="helper"></span><img src='logo1.jpeg' class='img-responsive img-circle'></li> 
           <li><span class="helper"></span><img src='logo2.png' class='img-responsive img-circle'></li> 
           <li><span class="helper"></span><img src='logo3.png' class='img-responsive img-circle'></li> 
           <li><span class="helper"></span><img src='logo4.png' class='img-responsive'></li> 
           <li><span class="helper"></span><img src='logo5.png' class='img-responsive'></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </article> 

現在我有這個叫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 { 
 
\t height: auto; 
 
} 
 

 
#customers .bxslider .helper { 
 
\t display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://dl.dropboxusercontent.com/u/87318409/jquery.bxslider.min.js"></script> 
 
<link href="https://dl.dropboxusercontent.com/u/87318409/jquery.bxslider.css" rel="stylesheet"/> 
 
<link href="/home/naveen/Dropbox/Public/style.css" rel="stylesheet"/> 
 
<article id='customers'> 
 
\t \t \t \t \t <div class='wrapper'> 
 
\t \t \t \t \t \t <div class='container'> 
 
\t \t \t \t \t \t \t <div class='col-md-12 col-sm-12'> 
 
\t \t \t \t \t \t \t \t <h1 class='text-center'> Happy Customers...... </h1> 
 
\t \t \t \t \t \t \t \t <ul class='bxslider'> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo1.jpeg' class='img-responsive'></li> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo.png' class='img-responsive img-circle'></li> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo2.png' class='img-responsive img-circle'></li> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo3.png' class='img-responsive img-circle'></li> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo4.png' class='img-responsive'></li> 
 
\t \t \t \t \t \t \t \t \t <li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo5.png' class='img-responsive'></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </article>

片段是工作，你可以得到的是什麼問這個問題的想法。

Answer 1

嘗試把顯示：內聯，看看它是否工作

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

http://jsfiddle.net/mqpa6j8e/

Answer 2

這Flexbox的伎倆將解決你的問題

<div id="parent"> 
    <div id="child"> 
    </div> 
</div> 

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