FlowSuggest

How can I create a split divider with text in the middle in Webflow without using Flexbox for optimal IE support?

CSS Published on

Note FlowSuggest is not affiliated with Webflow. For official help, visit the Webflow community.

To create a split divider with text in the middle in Webflow without using Flexbox for optimal IE support, you can follow these steps:

  1. Add a Section element to your page:
  • Drag and drop a Section element from the Elements Panel onto your canvas.
  1. Configure the Section element:
  • Set the height of the Section element to the desired height for your split divider.
  • Set the background color or image of the Section element to create the visual split.
  1. Add a Container element to the Section:
  • Within the Section element, drag and drop a Container element.
  1. Configure the Container element:
  • Select the Container element and set its width to 100%.
  • Set the display property of the Container element to Table.
  • Set the height of the Container element to 100% to ensure it fills the entire Section element.
  1. Add a Div Block element to the Container:
  • Within the Container element, drag and drop a Div Block element.
  1. Configure the Div Block element:
  • Select the Div Block element and set its display property to Table-cell.
  • Set the vertical-align property of the Div Block to Middle.
  1. Add text to the Div Block:
  • Double click inside the Div Block element to enter text mode.
  • Type the desired text.
  1. Style the text:
  • Select the text inside the Div Block element.
  • Use the typography settings in the Webflow Style Panel to customize the font, size, color, and other properties of the text.
  1. Fine-tune the design:
  • Adjust the Section element, Container element, and Div Block element as needed to achieve the desired visual split and text placement.
  1. Preview and test:
    • Preview your site to see how the split divider with text looks.
    • Test it in different browsers, including Internet Explorer, to ensure optimal support.

By following these steps, you can create a split divider with text in the middle in Webflow without using Flexbox, which will provide optimal support for Internet Explorer.

Additional Questions:

  1. How can I create a split layout in Webflow?
  2. What are some alternative methods to Flexbox for creating layouts in Webflow?
  3. Can I customize the styling of the split divider and text further in Webflow?

Related questions

All CSS questions →