无法在 Jquery Cycle 幻灯片中将我的图像居中答案

【问题标题】：Cant center my images in Jquery Cycle Slideshow无法在 Jquery Cycle 幻灯片中将我的图像居中
【发布时间】：2012-05-13 04:29:22
【问题描述】：

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

我在 1 个 div 中有 3 个 div，这 3 个 div 每个都有 3 个图像，它们都并排放置。我使用 jQuery 循环制作了 3 个幻灯片。这完美无缺。如您在此处看到的，某些图像需要居中

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

或

http://www.willruppelglass.com/index.php

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

【问题讨论】：

你试过太糟糕了！
谷歌搜索？喜欢webdesign.about.com/od/beginningcss/a/aa012207.htm 吗？您需要水平居中还是垂直居中？您可能需要包装图像，具体取决于您想要实现的目标。
我刚刚创建了两个包含三个图像的 div，并放置了style: text-align: center;，它以我为中心。确保清理浏览器缓存/历史记录或执行 ctrl f5。
我假设 text-alight:center s/b text-align:center。尝试创建一个jsFiddle - 你会得到更多帮助。
好吧，顶部：0；左：0。那是为了什么？

标签： jquery jquery-cycle

【解决方案1】：

试一试：

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

工作 jsFiddle 用于水平居中的图像，至少在 Chrome 中。问题：您希望这三张图片并排还是叠放？

如果您希望它们并排，则必须从上述 CSS 中的 .pics 类中删除 width。

【讨论】：

这不起作用:(但我确实将它应用到我的代码中，虽然在willruppelglass.com/index.php，你可以看看那里，看看我在处理什么。
@user1193385：您使用的 JS 循环器将动态修改 CSS 和元素的定位。我不确定您能做多少。正在循环的图像都是不同的大小，这使问题复杂化。如果您想要一个适合图像循环的答案，您可能需要准确描述您希望它的外观和行为方式。
@Cory jsfiddle 链接在 Chromium 中对我不起作用。 Cycle 插件使用内联 css 覆盖 css 样式。

【解决方案2】：

循环一些 div 并将图像在 div 中居中可能会更好..

http://jsfiddle.net/lucuma/wHLJD/

【讨论】：

【解决方案3】：

我用的是小号plugin of mine：

jsFiddle demo

我对您的 CSS 进行了一些更改，将每个图像（通过 jQuery）包装到 <span> 元素中。
这样做我可以使用 line-height 和一些你可以在我的 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！）：

/*FadeMe 'FPS'//jQuery_plugin//Author:Roko C.Buljan (2012)// www.roxon.in*/(function($){$.fn.fademe = function(F,P,S){F=F||700;S=S-1||0;P=P||3000;var E=this.children(),T;function a(){E.siblings(E).stop().fadeTo(F,0).eq(S=++S%E.length).stop().fadeTo(F,1);}E.on('mouseenter mouseleave click',function(e){var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());}).hide().eq(S).show();function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();};})(jQuery);

$('.pics img').each(function(){ // just added to wrap your images into spans.
  $(this).wrap('<span />');
});

$('.pics1').fademe(1360,3500,2); //fadeTime,pause,StartSlideN
$('.pics2').fademe(1300);        //fadeTime
$('.pics3').fademe(1240,3920);   //fadeTime,pause

就是这样。这个插件可以让你：

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

默认设置为：
1.Fade time = 700, Pause = 3000, Start slide = 1;

您可以在我的页面HERE找到更多信息

【讨论】：

【解决方案4】：

我会这样做，使用一些 jQuery 魔法为图像添加边距，并使用 Cycle 中的 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
});

这是DEMONSTRATION！

或VERTICAL DEMO！

【讨论】：

【解决方案5】：

图像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
});

【讨论】：

【解决方案6】：

我已经对此进行了尝试和测试，它可以按要求工作：

HTML：

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

CSS 加法：

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

【讨论】：