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

＆＃13;

$(document).ready( function() {
    $('.bxslider').bxSlider({
      auto: true,
      slideWidth: 420,
      minSlides: 2,
      maxSlides: 3,
      slideMargin: 10,
      ticker: true,
      speed: 6000,
      tickerHover: true,
    });
});

＆＃13;

.bxslider li {
	height: auto;
}

#customers .bxslider .helper {
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#customers .bxslider img {
	vertical-align: middle;
	width: 300px;
}

＆＃13;

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

＆＃13;

Snippet正在运行，您可以了解问题中的问题。

Answer 1

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

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

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

Answer 2

尝试将display：inline放入以查看是否有效

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

http://jsfiddle.net/mqpa6j8e/

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

2 个答案: