Jquery 如何在一个div中居中显示不同大小的幻灯片图像

我已经用jQuery循环设置了一个幻灯片放映，但是我的所有图像都以不同的大小居中，这是一个问题。宽度较小的图像显示在div内的左侧，高度较小的图像显示在div内的顶部；显示：块；文本对齐：居中；但似乎什么都不管用。我尝试设置最小宽度或最小高度，但仍然不起作用。可能是我忽略了一些简单的东西，或者是jQuery与CSS冲突？任何提示都将不胜感激。以下是我的意思示例：

我的HTML：

<div id="slideshowWrapper">
 <div id="slideshowImages" class="slideshow">
  <img src="image1.jpg" width="530" height="530"/>
  <img src="image2.jpg" width="530" height="530"/>
  <img src="image3.jpg" width="530" height="530"/>
  <img src="image4.jpg" width="395" height="530"/>
  <img src="image5.jpg" width="530" height="106"/> 
</div>
</div>

jQuery循环：

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000, 
timeout: 10000, 
next:   '.slideshow', 
pause:   1,
pager:  '#thumbnavigator',
slideExpr: 'img',
before: function() {  
        $('#caption').html(this.alt); 
          },

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="40" height="40" /></a></li>';
 }
 });

$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:'淡入'，//选择过渡类型，例如：淡入、向上滚动、洗牌等。。。
速度：1000，
超时：10000，
下一步：'.slideshow'，
暂停：1，
寻呼机：“#拇指导航器”，
slideExpr:“img”，
before:function（）{
$（'#caption'）.html（this.alt）；
},
//回调fn，创建用作寻呼机定位的缩略图
pagerAnchorBuilder:函数（idx，幻灯片）{
返回“
”；
}
});

---

使用CSS将每个尺寸的所有图像居中，如下所示：

---

像这样，图像将始终位于

.slideshow

元素的中心。

对于您正在使用的galery来说似乎非常复杂，因为此库正在覆盖位置和内联样式。此外，在您的代码中多次使用id=“slideimage”id只能使用一次（改用类）感谢Caramba提供的JSFIDLE。我清理了代码并删除了id=“slideimage”和其他不必要的jQuery脚本。更新了JSFIDLE如果jQuery循环覆盖了位置，有没有办法在jQuery中解决这个问题？谢谢Nico。不幸的是，你建议的CSS不起作用。请看一下CSS框中的第26-41行：我插入了你的CSS，但它不起作用。正如@caramba所说的，coujQuery是否导致了冲突？是的，你是对的@bdesign。问题是，图像被设置为

位置：绝对

。我上面的解决方案只能处理静态/相对图像。

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000, 
timeout: 10000, 
next:   '.slideshow', 
pause:   1,
pager:  '#thumbnavigator',
slideExpr: 'img',
before: function() {  
        $('#caption').html(this.alt); 
          },

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="40" height="40" /></a></li>';
 }
 });

.slideshow
{
    width: 530px;
    height: 530px;
    background-color: silver;
    text-align: center;
}
.slideshow img {
    display: inline-block;
    vertical-align: middle;
}
.slideshow:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    height: inherit;
}