如何在 div 中将不同大小的幻灯片图像居中

Question

我已经使用 jQuery Cycle 设置了幻灯片，但是在将所有图像以不同尺寸居中时遇到了问题。宽度较小的图像显示在 div 内的左侧，高度较小的图像显示在 div 内的顶部。我试过 margin: 0 auto;显示：块；文本对齐：居中；但似乎没有任何效果。我尝试设置最小宽度或最小高度，但它仍然无法正常工作。可能是我忽略了一些简单的事情，或者可能是 jQuery 与 CSS 冲突？任何提示将不胜感激。这是我的意思的示例：http://jiyongart.com/Test-centerImage

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

我的 CSS：

#slideshowWrapper {
height: 586px;
width: 730px;
position: relative;
float: left;
padding-top: 55px;
text-align:center;
color: #999;
}
#slideshowImages {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A1A1A1;
position: relative;
width: 530px;
margin: 0 auto;
top: 0;
text-align: center;
}
#slideshowImages img {
margin: 0 auto;
display: block;
text-align: center;
min-width: 395px;
    max-height: 106px
}
.slideshow {
    margin: 0 auto;
position: absolute;
overflow: visible;
text-align: center;
}

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>';
 }
 });

JSFiddle here

Answer 1

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

http://jsfiddle.net/NicoO/fw9qg/

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

这样，图像将始终位于 .slideshow 元素的中心。