Question

我已经使用jQuery Cycle设置了幻灯片，但是我的所有图片都以不同的尺寸居中存在问题。宽度较小的图像显示在div内部的左侧，高度较小的图像显示在div内部的顶部。我试过保证金：0自动;显示：块; text-align：center;但似乎没什么用。我尝试设置最小宽度或最小高度，但它仍然无法正常工作。它可能是我忽略的简单，或者可能是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元素的中心。

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

1 个答案: