Webflow sync, pageviews & more.
NEW

How can I align all of the slides in my testimonial slider horizontally centered in Webflow?

TL;DR
  • Set the Slider or Slide Mask to Flex display with centered justify and align settings.
  • Center slide content using Flexbox or text-align center, ensure no disruptive margins or positioning styles are applied.

To center all testimonial slides horizontally in a Webflow slider, you need to ensure both the slide container and slide content are properly aligned using Flexbox or text alignment styles.

1. Set the Slide Mask or Slider to Use Flexbox

  • Select the Slider or Slide Mask element in the navigator.
  • In the Style panel, set Display to Flex.
  • Set Justify to Center and Align to Center or Start, depending on your vertical preference.

2. Center the Content Inside Each Slide

  • Select a Slide element.
  • Confirm the Slide’s display is either Block or Flex.
  • If using Flex:
  • Set Justify to Center.
  • Set Align to Center (optional for vertical).
  • If using Block:
  • Go to the Text Alignment section.
  • Set Text Align to Center.

3. Adjust Width and Margin (If Needed)

  • Make sure the testimonial container inside the slide doesn’t have a fixed margin-left or margin-right that could offset it.
  • Set a max-width on the testimonial content (e.g., 600px) and then add:
  • Margin: Auto left and right to center it within the slide.

4. Avoid Absolute or Float Positioning

  • Ensure no testimonial elements are using float or absolute positioning, which could disrupt horizontal alignment.

Summary

Set the Slider or Slide Mask to use Flexbox with centered alignment, and ensure each slide’s content is centrally aligned using Flex settings or center text alignment. This ensures each testimonial appears horizontally centered, regardless of content length or layout.

Rate this answer

Other Webflow Questions