Javascript 如何在幻灯片中居中显示不同大小的图像？

我想用幻灯片展示我的工作，但我对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>

$（'#滑块'）。循环（{
fx:‘滚动人’，
速度：“快”，
超时：0，
下一个：“#下一个”，
上一页：“#上一页”
});

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；，文本对齐：居中，显示：块；但什么都没用。帮助？

试试这个：

使用

jQuery

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

使用

CSS

，您必须使用

！重要信息

因为

cycle jQuery插件

正在向图像添加

内联CSS

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