How do I center a third party affiliate code widget in my Webflow page?

If a third-party affiliate code widget is not centering properly in Webflow, you can use CSS adjustments or Webflow's built-in tools to align it. Here’s how:

1. Wrap the Widget in a Div Block

• Go to the Webflow Designer and add a Div Block.
• Place the Embed element inside this Div Block.
• Paste the affiliate widget code inside the Embed element.

2. Use Flexbox to Center

• Select the Div Block and go to the Style panel.
• Set Display to Flex.
• Choose Justify: Center and Align: Center to center it both horizontally and vertically.

3. Use Margin Auto for Centering

• If Flexbox doesn’t work, set the Div Block to Display: Block.
• Apply left and right margin to Auto in the Style panel.
• Ensure a specific width is set if the widget doesn’t have one by default.

4. Use Custom CSS if Needed

• If the widget doesn’t align correctly, add custom CSS in Page Settings > Custom Code under “Inside <style> tags”:
  Example:
  ```css
  .widget-container {
  display: flex;
  justify-content: center;
  }
  ```
• Assign widget-container as a class to the Div Block in Webflow.

5. Adjust iframe Alignment (If Applicable)

• If the affiliate widget includes an iframe, set its width to 100% or use custom CSS:
  Example:
  ```css
  iframe {
  display: block;
  margin: 0 auto;
  }
  ```

Summary

To center a third-party affiliate widget in Webflow, wrap it in a Div Block, use Flexbox or auto margins, and apply custom CSS if necessary. If the widget contains an iframe, ensure it is aligned properly with the correct width settings.