En realidad, esto debería ser trivial, pero no puedo hacer que funcione. Estoy usando este bonito plugin jquery bxslider para las diapositivas de las imágenes y las imágenes son de diferente tamaño.

Cuando las imágenes se procesan en el navegador, se alinean con la línea superior. Quiero que se alineen en el medio.

Imagen de la condición

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

ahora tengo este complemento jquery llamado bxslider, y también tiene su propio estilo, pero no creo que lo afecte. Pero necesito que las imágenes se alineen verticalmente en el medio.

CSS

Este es el 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>

El fragmento funciona y puede hacerse una idea de lo que se hace en la pregunta.