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

Question

实际上这应该是微不足道的，但我无法让它工作我正在使用这个不错的 jquery 插件 bxslider 来制作图像幻灯片并且图像大小不同。

当图像在浏览器中呈现时，它们与顶线对齐，我希望它们在中间对齐。

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

片段正在运行，您可以了解问题中提出的内容。

Answer 1

尝试输入 display:inline 看看是否有效

#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;
}

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

Align images vertically in jquery bxslider plugin

jquery

css

vertical-alignment

bxslider