如何在幻灯片中将不同尺寸的图像居中？

Question

我想要一个我的工作的幻灯片，但我是 html/css/jquery 的新手。我正在使用一个看起来像这样的 jquery 插件：

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({ 
    fx:     'scrollHorz', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});
</script>

HTML 看起来像这样：

<div align="center" id="slideshow">
        <div class="controller" id="prev"></div>
        <div id="slider">
        <img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
        <img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
        <img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
        <img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
        <img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
        </div>
        <div class="controller" id="next"></div>
</div>

我一直在修改滑块 id 并且我已经尝试了所有我知道的东西-margin:0 auto;, text-align: center, display: block;但没有任何效果。帮忙？

Answer 1

试试这个：

使用jQuery

$('#slider img').css({position: 'relative', margin: 'auto'});

使用CSS，您必须使用!important，因为cycle jQuery plugin 将inline CSS 添加到图像中

#slider img {
    position: relative !important;
    margin: auto !important;
}