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.