Problem/Motivation

Impossible to center the slideshow

Steps to reproduce

I have used the method:
1 Go to Configure field.
2 No Rewrite Results needed in this case, but Style Settings.
3 Check Customize field HTML
4 Set DIV in HTML element dropdown list.
5 Check Create a CSS class
6 Set CSS class input value to .text-align-center
This is working for all other formats but not for Slideshow
When I do a refresh the image is centered for a short time but on the next image, it is left aligned.

I have also tested the method described here https://www.drupal.org/docs/7/modules/views-slideshow/theming/horizontal...
and added this in style.css

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

This is not working either.

I am using Bootstrap5 subtheme in Drupal core 10.1.3

I registered this as a bug because it worked to centre this View in all other formats but Slideshow with the first method.

If I missed some settings in Slideshow I apologize and hope someone can help me to do this right.

Thanks

Comments

chrotto created an issue. See original summary.

chrotto’s picture

chrotto commented
Issue summary: View changes
jochen wendebaum’s picture

jochen wendebaum commented

For anyone landing here with the same issue: the slideshow renders left-aligned because the Views Slideshow Cycle plugin injects inline styles on ".views_slideshow_cycle_teaser_section" (or whatever that might be in your case) that set a fixed pixel width (matching the image width configured in the View) but no margin. A block element with a fixed width defaults to left-alignment — the browser puts all remaining space on the right.

The fix is a single CSS rule in your theme:

.views_slideshow_cycle_teaser_section {
  margin: 0 auto;
}

This splits the remaining horizontal space equally on both sides, centering the slideshow within its parent container. No !important is needed because the JS-injected inline style sets position, width, and height, but never margin, so there is no conflict.

Note: this only works if the parent container is wider than the slideshow itself, which is the normal case when the slideshow width matches the image dimensions and the layout has a wider max-width.