Centering Slideshow not possible anymore

I'm on the 2.x dev version and text-align: center works fine for me.

Marking as fixed as it seems to be theme specific.

I am having this same problem.

When the image first comes up it is centered.

But then as the pager and slideshow begin, it goes to the left.

.views_slideshow_main{
text-align:center !important;
}

.views_slideshow_singleframe_main .views_slideshow_singleframe_teaser_section .\
views_slideshow_singleframe_slide .views_slideshow_slide .views_slideshow_singl\
eframe_hidden .views_slideshow_singleframe_controls_1 .views_slideshow_singlefr\
ame_pager_1 .views_slideshow_singleframe_image_count_1{
text-align:center !important;
}

Link to a website always helps.

I can also confirm this.

It appears that text-align: center; is not the issue, rather it's the js which is setting the wrong width of each views_slideshow_singleframe div.

Here an example of a live site with the issue. Look at the centering on the both the New products and Specials slideshow blocks. Disable js, reload, they are centered fine.

It appears its the width calculation that the cycle plugin makes which is incorrectly setting the width of the views_slideshow_singleframe_x_y div.

I am not sure what this means: Disable js, reload, they are centered fine.

Could you explain step by step for this bone-head?

Thanks!

Yeah no worries, try the web developer toolbar. Once installed go to Disable -> Disable JavaScript -> All JavaScript. Then reload the page.

You'll notice that the centering issues don't occur when js is disabled.

So the issue is coming from the js, which appears to be setting the width on each div/node in the slideshow at the time each div is shown.

Hi all,

its because the js give every element the tag position:absolute. But you can not change this in the js because it will not hide the underlying container any more. So I'm thinking on this but I think i will switch back to version 1.0

Cheers

Dirk

Subscribe.

Ditto on this. I thought it might be caused from optimization from the Javascript files, so I disabled it in Drupal but the alignment didn't change.

i'm also dealing with this frustration.
can't go back to v1 b/c i'm using v2 features in other views. :-/
super annoying to say but i might have to resort to editing my images as a work around.

Or you can use padding. Not optimal but it works (kinda sorta).

Padding won't work if all your images in the slideshow are of not of equal size. (If I'm wrong, please clue me in - tried every bit of css I can think of to make this work.)

I'm using a Fusion subtheme, since it was thought early on that this was theme specific.

subscribing

Hi guys,
I am very new to drupal and its various modules. I am rebuilding my organization's website using drupal, but still trying to keep the feel that it had originally. I am having a hard time with the views slideshow. I have two small slideshows in my left sidebar. I would like them to be centered within the sidebar, and I have no idea how to do that. I tried adding the text-align:center text to my layout.css for my theme (which is a zen subtheme, btw), but this does not center the slideshow, just text that is in the bar. I have been unable to figure this out. I have not touched (or even found) any of these template/tpl files that I see mentioned in documentation and the issues forums.

If someone could help me figure this out (or explain to me what I am not understanding about how these various css files interact within this module), that would be great.

I am currently testing my drupal site on a friend's webhost, so my test site is located at:
http://rootaction.net/~daysparrow/musicweb. Also, like I said I am brand new to this, so if you notice any other issues at a glance, please let me know.

Hello,

I had this problem, too. I am sure this is not the best way of doing it, but it seems to do it none the less:

.views_slideshow_singleframe_slide {
	left:50% !important;
	margin-left:-465px;/**Half of the total desired width of the div**/
	text-align:center;
	width:930px !important;/**The total desired width of the div**/
}

An article on Horizontally Centered Absolute Positioning:
http://www.mezzoblue.com/tests/centered-css/

Can anyone confirm that #18 fixes the issue for them?

Marking as fixed.

This problem still persists and I can confirm that #18 fixes the issue.

I can't see anything in the module that could be changed to allow easy centering. Maybe some prominent documentation with a simple example and a link to the article in #18?

The fix is the css above. You need to add it to your css file. This isn't an easy fix, but it's what is needed to be done to your css file to get this to work.

I can also confirm that fix in #18 works, and I am using images that are different widths. Thanks, The Daily Clobe!

While #18 works to center the content horizontally, I have not been able to get it to center vertically.

I tried adding:

.views_slideshow_singleframe_slide {
left:50% !important;
margin-left:-126px;
text-align:center;
width:251px !important;
top:50% !important;
margin-top:-53px;
vertical-align:middle;
height:106px !important;
}

However, it didn't budge from the top of the div. Any thoughts?

I had found this code:

before: function() {
        $(this).css({left: '50%', marginLeft: -$(this).width()/2});
        $(this).css({top: '50%', marginTop: -$(this).height()/2});
} 

here: http://old.nabble.com/Cycle-plugin-an-absolute-positioning-td16039437s27...
When I stuck it in the "Advanced Options" box, it positioned the element correctly, but the performance was bad and the script quickly unresponsive. Seems like it could work if properly stitched into the plugin.

#18 didn't work for me. See http://www.savmasymposium2010.com/site/ . I put the CSS into my theme's style.css - is that not where it goes?

@24 Instead of putting it on the slide try doing it for the entire view container.
@25 If you did put it in it's not showing up on your site. You will have to make sure you put it in the right place for your theme.

subscribing

#18 works for me too. One caveat: if there is only one photo then it sits halfway off the left side of the screen rather than centered. This also happens with the first image in a gallery upon the initial page load. Could this be happening because I also enabled the "Views Slideshow: SingleFrame" module?

@redndahead - thanks for the suggestion, but I haven't been successful yet. Maybe i am not targeting the right container. I tried the block - #block-views-program-partnerspanel-pane-1 and the block content #block-views-program-partnerspanel-pane-1 .content as well as the div inside these - .view-display-id-panel-pane-1 and .view-display-id-panel-pane-1 .view-content. Any guidance? I go at it again tomorrow night. Thanks.

i would like to help, but to do this i want to see the target site.
place a link here, and i will try to find a solution.

thanks intyms! Here is one of the places that I am using views slideshow: http://adaptive.connect2mrkt.com/program/aqua-experience

to #31 maddentim
see attached file please. it has 2 pages.

also, if you want to center text horizontally, use this css:

.views-showcase-big-panel .views-showcase-title {
text-align:center;
}

to #32 intyms, thank you for the help. Actually, the trouble is not the in views-showcase box but the views-slideshow on the right sidebar. see attached screenshot. it is centering horizontally, but not vertically. (however, it has been on my list to fix the shading of the title on the slideshow!)

Your problem is that some images are taller than others. You can fix this using imagecache

1) download imagecache_actions
2) In your cache scale your image to the largest size it can be. Don't allow upscaling.
3) Use Define canvas to create a white canvast the exact height and width you want your image to be and have the image go into the center.

This will center your image vertically and horizontally.

here is another solution with CSS:

div.views_slideshow_singleframe_teaser_section {
display:table;
height:144px;
width:251px;
}

.view-program-partners .views_slideshow_singleframe_slide {
display:table-cell !important;
left:50% !important;
margin-left:-126px;
position:absolute !important;
text-align:center;
top:50% !important;
vertical-align:middle;
width:251px !important;
}

div.views-field-field-partner-logo-fid  {
position:relative;
text-align:center;
top:-50%;
}

The step by step guide you will find here.
The author wrote: The code ... works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari. The page can be HTML or XHTML, standard or quirk mode.

The results you can see in the attached file.
Good luck.

Need to leave mark as fixed and let it automatically close.

redndahead and intyms - Thank you both! I remember looking at imagecache actions a long while back but forgot about it. define canvas is cool. i am going to use it often. drupal has so much cool stuff. amazing. gotta love drush too. makes adding a module a snap!

#36
redndahead

thanks. from now on i won't make such errors.

@28 You need to add position: relative to the class. Make sure you do *not* make it !important - if there are multiple slides it needs to be overriden by their element style after loading for the transition to display correctly.

Hi all,

#18 worked for me with one change - I wanted more than one slideshow width, so just tried width:100% and it worked:

.views_slideshow_singleframe_slide {
left:50% !important;
margin-left: 0px;/**Half of the total desired width of the div**/
text-align:center;
width:100% !important; /**The total desired width of the div**/
}

I just pasted the CSS into panels General tab, hopefully this allows many slideshows of varying widths, maybe later will add to my CSS.

I've gotten the slideshow div to center using .views_slideshow_singleframe_slide in my my theme CSS.

The problem is when you refresh/load the page -- either when you first come to the page or login/logout -- the slideshow reverts to the default settings for a second and then when the whole page finishes loading, the slideshow reads the theme CSS and is centered. The jump is very noticeable.

Thanks.

later -- fixed it by changing the css to:

.views_slideshow_singleframe_slide {
    margin-left: auto;
    margin-right: auto;
    width:  240px;
    padding-top:  20px;
}

Both #18 and #42 work, so long as Javascript IS enabled for #18 and is NOT enabled for #42.

I am also struggling with the solution in #18. I understand the reasoning behind it but when I have my slideshow as a panel pane I cannot get it to work. Also different slideshows would need different settings...
However could someone provide me with the padding solution please? My images are all the same width and therefore this might be a better solution. I am still not that good with CSS so some guidance would be nice.

Anyhow, this process should be documented by someone in the know because I guess most non-code users never accomplish centering without good guidance.

edit: Rereading this issue brought me to #40 and this solution seems to work.

#40 is as per #18 and #42, it depends on whether or not JS is enabled.

#40 doesn't work as actual center alignment. At least, not for me. All it does is push the margin of my images over to the right a bit. Since I have images with wildly different widths, this results in a slideshow that is *indented* but not centered. The images also ignore the boundaries of the block they normally inhabit (the "content" area). A center alignment solution would not result in this behavior because an image whose size is smaller than the block should never be large enough to leave it in the event that image is center aligned.

Center alignment =/= indenting. Am I misunderstanding what's going on here?

#35 just seems to center my image in the middle of the page. I may be doing something wrong here, though. Not a lot of explanation.

#34 Works well, but remember to flush cache!

Re #34, what the heck is a Define canvas??

UPDATE

Ah, I see, it's in ImageMagick. I've always used GD2

I use gd2 and it's in the imagecache_actions module

this worked for me http://jquery.malsup.com/cycle/center-horz.html
give the slideshow div a width, used 100% in mine and "margin:auto, diplay:block" to the img tag

@px42 Nice work, that malsup example also worked for me. Simple, and alleviates the content jump issue which happens on dom ready associated with #18 and derivatives.

I'm closing this again. If someone wants to document this in our documentation I would appreciate it.

Wanted to add a quick note that I was able to simplify #40 and get centering working correctly for my slideshow. This snippet should work for most situations.

.views_slideshow_singleframe_slide {
  text-align: center;
  width: 100% !important; 
}

I added a handbook page covering this at http://drupal.org/node/985488 and removed the "Needs Documentation" tag.

I tried all the above methods, but none were really satisfactory. The only method that nearly worked was#18, but a delay in loading the CSS on slower connections meant that the first image was always positioned to the left of the intended area and it would jump back into place once the CSS loaded.

A better solution can be found I'm sure.

Here's one idea. This is an example of a views slideshow cycling within a set of images that have different heights and widths. I've only included the first image.:

    <div class="views_slideshow_singleframe_teaser_section" id=
    "views_slideshow_singleframe_teaser_section_member_logo_cycler-block_1"
    style="position: relative; width: 180px; height: 185px;">
      <div id="views_slideshow_singleframe_div_member_logo_cycler-block_1_0"
      class=
      "views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views-row-odd"
      style=
      "position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 180px; height: 100px;">
      <div class="views-row views-row-0 views-row-first views-row-odd">
          <div class="views-field-image-image">
            <span class="field-content">
              <img width="180" height="95" class="image image-preview" title="Prostate Action "
                alt="Prostate Action " src="..."></span>
          </div>
        </div>
      </div>
    </div>

Notice that the image is enclosed in a <span> with class field-content. <span> are inline and occupy the width of the elements inside them - you can't set the width of an inline element. So centering the image inside the span will do nothing. Changing the <span> to block-level however, means that you can then set it's width and centre with image within it.

You can do that 2 ways as far as I can tell. Either a theme override on the field and change the <span> for a <div>. Or the simple way is with a bit of CSS like this. The widest images in my set are 180px, so I've set that to be the width of the surrounding span.:

.views_slideshow_singleframe_teaser_section span.field-content {
    display: block;
    text-align: center;
    width: 180px;
}

This works perfectly for my slideshow. I hope someone else finds it useful.

None of the methodes discussed above will work properly if you have overlayed text in your slideshow, as documented in this screencast by Mustardseedmedia. text-align: center; will center anything you positioned otherways, e.g. with .views_slideshow_slide { position: relative; } and absolutely positioned text/icons inside.

The only correct way is imho to target the container ID like so:

#views_slideshow_singleframe_main_slideshow_...-block_1 { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 920px;
  overflow: hidden;
}

Where width: 920px; needs to exactly match the width as defined in .views_slideshow_slide {}.

Also, with this desclaration you get .views-slideshow-controls-bottom {} properly aligned to the main slideshow window.

This is a ridiculous "fix". You can't fix this with CSS, as what ever you put in is overwritten by JS. The solutions in #18, and #55 do not work in 3.0. #52 works (using .views_slideshow_slide as the class), but because of the absolute attribute added by the javascript, I'm forced to have a fixed css top value, so can't have a slideshow situated below flexible-height content.

Why is the javascript giving the slideshow divs a position:absolute; attribute? Surely this should be set in a fixed css declaration (so that it can be overwritten by a themer)? Is this neccesary?

This is surely a huge WTF for new views_slideshow users..

Hrm.. never mind me. I just needed to fix the css on some parent elements. sorry.

easily done!

Solution that works for me with 7.x-3.0 (found here):
In view properties, assign a CSS class to this block view
(let it be "project-slider" or whatever you name it);
then,

.views_slideshow_cycle_slide {
        width: 100%;
}
.project-slider img {
        display: block; 
        margin: 0 auto;
}

where views_slideshow_cycle_slide is block class.

Tried solution #59 by adding this code to views_slideshow_cycle.css as shown below, but it didn't worked

.views_slideshow_cycle_no_display,
.views_slideshow_cycle_hidden,
.views_slideshow_cycle_controls,
.views_slideshow_cycle_image_count {
  display: none;
}

/*Center slideshow*/

.views_slideshow_cycle_slide {
  width: 100%;
}

.project-slider img {
  display:block;
  margin:0 auto;
}

/* Pager Settings */

.views_slideshow_cycle_pager div a img {
  width: 75px;
  height: 75px;
}

.views_slideshow_pager_numbered div, .views_slideshow_pager_thumbnails div {
  display: inline;
  padding-left: 10px;
}

.views_slideshow_cycle_pager.thumbnails a.activeSlide img {
  border: 3px solid #000;
}

.views_slideshow_cycle_pager.numbered a.activeSlide {
  text-decoration: underline;
}

my first thought was, did you add "project-slider" as a class for the views display as GN directed? that would be critical....

In Structure > Views I've already added the project-slider as CSS class in the settings > Advanced > Other > CSS class.

Not sure if this is the correct approach but at the moment it doesn't work for me.

Then I've tried alternative approach where I install the block class module, enable the module and subsequently go to structure > blocks -> Configure where I can set the CSS class for the block.

Also after doing this, it doesn't work for me.

Thank you GN! I spent hours trying every solution I could find, including all on this page. It was #59 that finally worked.

To clarify for anyone still having trouble with this I've attached a screen shot of where to add the CSS class to the image. I then added the CSS:

.views_slideshow_cycle_slide {
width: 100%;
}
.mainimage img {
display: block;
margin: 0 auto;
}

You also need to make sure that in your Field settings you have the box "Provide default field wrapper elements" checked.

Thank you for posting this! It took me about 3 hours of troubleshooting before I actually decided to look it up and your solution works perfectly!

I had issues with the container of the slides shrinking on me and then becoming out of alignment as a result, forcing the slides to remain the same size it works perfectly.

-Ryan

UR MY HERO! THX!

Went through the suggestions here and several more, finally this is what worked

.views-slideshow-cycle-main-frame { width:100% !important; text-align:center;}
.views-slideshow-cycle-main-frame-row { width:100%;}

Further suggestions here

Hi all, I've been reading through the many posts above and am not having much luck (been researching on and off for weeks!) either applying one or combinations of many of the proposed solutions.
I'm posting a link here to the website with slideshow I'm having trouble with (please note that's it's the rotating logo carousel at the bottom of the page I'm having trouble with, not the slider under the main menu):
http://eunic-global.aptalops.com/
I'm posting the because maybe there is some other factor which is causing the css solutions above not to work (not just being lazy!).
Perhaps there's another discussion going on more specific to multiples nodes per slide... if so, apologies.
Thanks,
A~

I am a total css noob, so forgive the silly question.

I wanted to add a css class like suggested in #63.

The question is: where to I define that class?
Do I need to create e.g. a custom.css file and declare it in the theme.info file? Do I need to do so in the views_slideshow.css? At some other css file?
If yes, how do I proceed from there? Is there a tutorial to cover this in a step-by-step manner?

Again thanks for the help.

OK, got it: sites/all/modules/views_slideshow/contrib/views_slideshow_cycle/views_slideshow_cycle.css

@ #67 this is the only one that worked for me. Thank you.

#67 worked to center the slideshow image for me but not other parts of the slideshow such as the navigation controls and slide title and caption. Here is the complete solution that worked for me. Some of it may be needed because of the theme I'm using which is AT Commerce.

1. Added a new region to the theme called featured_products.
2. added a div to page.tpl.php called featured-products
3. added css from #67 with 'max-width' instead of 'width' which allows the image to size for smaller screens

.views-slideshow-cycle-main-frame { max-width:100% !important; text-align:center;} 
.views-slideshow-cycle-main-frame-row { max-width:100%;} 

4. Centered the div on the page
#featured-products{ margin-right: auto; margin-left: auto; max-width: 60%; }

Perhaps I only needed the new region and div because I didn't fully understand the theme's css. I'm a css novice. But once I added it controlling the position was much easier.

Hello,

I know this is a bit old but I thought I would try #59 to center my slideshow but as a newbie I haven't got a clue where the files are kept. For example I used alaugh advice, added it to image styles but now what where do I put the code in the directory...I called it mainimage?

Thank you