无法在Jquery循环幻灯片中居中显示我的图像

我有这个问题，我在任何地方都找不到解决办法

我在一个div里面有3个div，这3个div每个都有3个图像，它们都并排排列。我使用jQuery循环制作了3张幻灯片。那很好用。一些图像需要居中，正如您在这里看到的

http://jsfiddle.net/rBaWG/19/

或

我已经尝试了所有的方法，但jQuery cycle似乎正在调整我的css代码以使这些图像居中，有人知道如何解决这个问题吗？

试一试：

.pics {  
    padding: 0;  
    margin: 0 auto; /* CHANGE HERE */
    width: 225px;
    height: 200px;
} 

.pics img {    
    background-color: #eee;
    /* Removed top and left */
}

.contentImages {
    text-align: center; /* Add */
    border: 1px solid #CCC; 
    padding: 10px; 
    margin: 20px auto 0; 
    position: relative;
    width: 675px;
    overflow: hidden;
}

用于水平居中的图像，至少在Chrome中。问：你想让这三张图片并排还是相互重叠

---

如果您希望它们并排出现，则必须从上述CSS中的

.pics

类中删除

宽度

。

最好循环一些div，并将图像置于div的中心

我用了一个小的：

我对CSS做了一些修改，将每个图像（通过jQuery）包装成

元素。
这样做，我可以使用线条高度和一些你可以在我的CSS中找到的技巧，使你的图像垂直和水平居中：

.contentImages{
    border:1px solid #CCC;
    padding:10px;
    margin:20px auto 0;
    position:relative;
    width: 675px;
    height:200px; /* added */
    overflow:hidden;
    background:#fff;
}
.pics{  
    position:relative; /* added */
    display:block; /* added */
    float:left; /* added */
    width:225px;
    height:180px;
}
.pics img {
    position:relative;
    vertical-align:middle;
    background-color: #eee;
    max-width:100%;
}
.pics span{    /* created by jQuery */
    cursor:pointer;  /* yes, I made your images swappable */
    position:absolute;
    margin-left:0px;
    height:200px;
    width:225px;
    text-align:center;
    background:#444;
    line-height:196px;
}

HTML：所有父元素现在都有公共类

pics

，以简化CSS

<div class="pics pics1">

这是我的jQuery插件（fadeMe！）：

[代码>>///代码>//*FADEMEE”FPS”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”，浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮式生产商”浮清除超时（T） ：（e.type=='click'？a（）：aa（）；}）.hide（）.eq（S）.show（）；函数aa（）{T=setTimeout（函数（）{a（）；aa（）；}，F+P）；}aa（）；}；}）（jQuery）； $（'.pics img'）.each（function（）{//刚刚添加，用于将图像包装到跨距中。 $（此）.wrap（“”）； }); $（'.pics1'）.fademe（13603500,2）；//fadeTime，pause，StartSlideN $（'.pics2'）.fademe（1300）；//fadeTime $（'.pics3'）.fademe（12403920）；//fadeTime，暂停 仅此而已。此插件允许您：

• 停止悬停滑梯悬停
• 点击前进
• 自定义淡入淡出时间、暂停和开始幻灯片N

默认设置为：
1.淡入淡出时间=700，暂停=3000，开始滑动=1；

---

您可以在我的页面上找到更多信息，以下是我的操作方法，使用jQuery魔术为图像添加边距，并通过使用循环中的

containerResize

选项确保容器始终与最大的图像大小相同，如下所示：

$('img').each(function() {
    var left = ($(this).parent().width() / 2) - ($(this).width() / 2);
    var top = ($(this).parent().height() / 2) - ($(this).height() / 2);
    $(this).css({marginLeft: left, marginTop: top});
});

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    containerResize: 1,
    nowrap: 0,
    random: 1,
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

这是一本书

---

或者！

图像div上图像居中的代码：

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

---

我已经尝试并测试了此功能，它可以按要求工作：

HTML:

---

你试过了，太糟糕了！谷歌搜索过了？比如？你需要水平居中还是垂直居中？你可能需要包装图像，这取决于你想要实现的目标。我刚刚创建了两个有三个图像的div，我放置了

style:text align:center；

并将其居中。请确保你清理了浏览器缓存/历史记录或执行了ctrl f5.我假设

文本点亮：居中

s/b

文本对齐：居中

。尝试创建一个-您将获得更多帮助。顶部：0；左侧：0。这是为什么？这不起作用：（但我确实在我的代码中应用了它，不过在，你可以在那里查看，看看我在处理什么。@user1193385:你正在使用的JS Cycle将动态修改CSS和元素的位置。我不确定你能做多少。正在循环的图像大小都不同，这使问题变得复杂。你可能需要如果您想要一个与图像循环相匹配的答案，请准确描述它的外观和行为。@Cory Chromium中的JSFIDLE链接对我不起作用。循环插件使用内联css覆盖css样式。

$('img').each(function() {
    var left = ($(this).parent().width() / 2) - ($(this).width() / 2);
    var top = ($(this).parent().height() / 2) - ($(this).height() / 2);
    $(this).css({marginLeft: left, marginTop: top});
});

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    containerResize: 1,
    nowrap: 0,
    random: 1,
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

<div class="contentImages">
    <div class="pics">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home1.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home2.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home3.jpg" height="200"/></div>
    </div>
    <div class="pics2">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home5.jpg" width="225"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home4.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home6.jpg" height="200"/></div>
    </div>
    <div class="pics3">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home7.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home8.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home9.jpg" height="200"/></div>
    </div>
</div>

.cc img{
    margin: auto;
}
.cc{
    text-align:center;
    width:225px !important;
    overflow:hidden;
}