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

【问题标题】：Align images vertically in jquery bxslider plugin在 jquery bxslider 插件中垂直对齐图像
【发布时间】：2015-12-01 08:18:27
【问题描述】：

实际上这应该是微不足道的，但我无法让它工作我正在使用这个漂亮的 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 {
	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>

代码段正在运行，您可以了解问题中的问题。

【问题讨论】：

您能否分享任何演示或实时链接，以便我们检查问题？谢谢
我们需要查看您的 css 才能为您提供帮助，请使用完整代码编辑您的问题。
我已经提交了所有相关代码，并且有一个我在 sn-p 中已有的工作预览

标签： jquery css vertical-alignment bxslider

【解决方案1】：

试着把 display:inline 试试看是否有效

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

http://jsfiddle.net/mqpa6j8e/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：