Cant center my images in Jquery Cycle Slideshow

Question

I have this problem and I can't find a solution anywhere at all....

I have 3 divs inside 1 div and those 3 divs each have 3 images and they all go side by side. I used jQuery cycle to make 3 slideshows. That works perfectly. Some of the images need to be centered as you can see here

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

or

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

I have tried everything, but it appears jQuery cycle is adjusting my css code to center these images, does anyone know how to fix this?

Googled for it? Like http://webdesign.about.com/od/beginningcss/a/aa012207.htm ? Do you need horizontal or vertical centering? You may need to wrap the images, depending on what you'd like to achieve. — Dennis Hunink, May 03 '12 at 16:04
i just created two divs with three images and i placed `style: text-align: center;` and it centers for me. Make sure you clean your browser cache / history or do a ctrl f5. — JonH, May 03 '12 at 16:04
I assume `text-alight:center` s/b `text-align:center`. Try and create a [jsFiddle](http://jsfiddle.net/) - you'll get a lot more help. — Barry Kaye, May 03 '12 at 16:05
I updated my jsfiddle below in my answer by cycling divs and centering the image in the div. — lucuma, May 07 '12 at 20:33
I don't understand... In the jsFiddle and in the page-demo the images positioning are totally different. In the fiddle the images are left-floated. How you mean centered?? if you ask me, on the page-demo are well centered. May you please explain? — Roko C. Buljan, May 08 '12 at 17:34
I do not get this theard quite well. The images seens centered inside its own div's. And I see no differences in any of the responses' explamples from the original of the question. What do you exactly want? To center images relative to each other? — Christopher Ramírez, May 10 '12 at 19:14

Cᴏʀʏ · Answer 1 · 2012-05-03T16:09:48.093

5

Give this a shot:

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

Working jsFiddle for horizontally centered images, at least in Chrome. Question: Do you want the three images to be side by side or on top of each other?

If you want them side by side, you will have to remove the width from the .pics class in the above CSS.

edited May 03 '12 at 16:09

answered May 03 '12 at 16:04

Cᴏʀʏ

105,112
20
162
194

this did not work :( but I did apply it to my code though at http://willruppelglass.com/index.php, you can look there so there see what I am dealing with. – user979331 May 03 '12 at 16:54
@user1193385: The JS cycler you are using is going to dynamically modify the CSS and positioning of the elements.. I'm not sure there's much you can do. The images being cycled are all different sizes, which complicates the issue. You may need to describe exactly how you want it to look and behave if you'd like an answer that fits with the image cycling. – Cᴏʀʏ May 03 '12 at 17:01
@Cory The jsfiddle link is not working for me in Chromium. The Cycle plugin overrides the css styles with inline css. – ArtBIT May 12 '12 at 00:51

score 3 · Answer 2 · answered May 11 '12 at 14:08

I have tried and tested this and it works as required:

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

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

adeneo · Answer 3 · 2012-05-10T17:10:46.930

Here's how I would do it, add a margin to the images with some jQuery magic, and make sure the containers are always the same size as the largest image by using the containerResize option in Cycle, like so:

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

Here's a DEMONSTRATION !

or a VERTICAL DEMO !

score 1 · Answer 4 · answered May 07 '12 at 03:30

1

It might be better to cycle some divs and center the images in the divs..

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

answered May 07 '12 at 03:30

lucuma

18,247
4
66
91

score 1 · Answer 5 · edited Jun 20 '20 at 09:12

I used a small plugin of mine:

jsFiddle demo

I changed a bit your CSS, wrapping each image (via jQuery) into <span> elements.
Doing that I could center your images both vertically and horizontally using line-height and some trickery you can find in my 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: all your parent elements now have the common class pics to simplify the CSS

<div class="pics pics1">

Here is my jQuery plugin (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

That's all. And this plugin allows you to:

Stop hovered slide on HOVER
Click to advance
Customize fade time, pause, and start slide N

The default settings are:
1.Fade time = 700, Pause = 3000, Start slide = 1;

You can find more info on my page HERE

lfergon · Answer 6 · 2012-05-11T07:41:57.133

The code behind center the images on the image 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
});

Cant center my images in Jquery Cycle Slideshow

6 Answers6

jsFiddle demo