Na verdade, isso deve ser trivial, mas não consigo fazê-lo funcionar. Estou usando este bom plugin jquery bxslider para os slides das imagens e as imagens são diferentes em tamanho.

Quando as imagens são renderizadas no navegador, elas estão alinhadas com a linha superior. Quero que elas estejam alinhadas no meio.

Imagem da condição

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

agora eu tenho esse plugin jquery chamado bxslider, e ele também tem seu próprio estilo, mas acho que não o afeta. Mas preciso que as imagens sejam alinhadas verticalmente no meio.

CSS

Este é o 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;
}

<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'>
					<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='https://dl.dropboxusercontent.com/u/87318409/logo1.jpeg' class='img-responsive'></li>
									<li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo.png' class='img-responsive img-circle'></li>
									<li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo2.png' class='img-responsive img-circle'></li>
									<li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo3.png' class='img-responsive img-circle'></li>
									<li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo4.png' class='img-responsive'></li>
									<li><span class="helper"></span><img src='https://dl.dropboxusercontent.com/u/87318409/logo5.png' class='img-responsive'></li>
								</ul>
							</div>
						</div>
					</div>
				</article>

O snippet está funcionando e você pode ter uma idéia do que é solicitado na pergunta.