Align images vertically in jquery bxslider plugin

问题

Actually this should be trivial but I can't get it to work I'm using this nice jquery plugin bxslider for the slides of the images and the images are different in size.

When the images render in the browser they are aligned to the top-line I want them to be aligned in the middle.

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>

now I have this jquery plugin called bxslider, and it also has it's own styling but I don't think it effects it. But I need the images to be aligned vertically in the middle.

CSS

This is the 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>

Snippet is working and you can get an idea of what is asked in the question.

回答1:

Try putting display:inline to see if it works

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

http://jsfiddle.net/mqpa6j8e/

回答2:

This Flexbox trick will solve your problem

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

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

来源：https://stackoverflow.com/questions/32410490/align-images-vertically-in-jquery-bxslider-plugin