How can I keep the icons connected to the text when centering the text in Webflow?

Published on
September 22, 2023

To keep icons connected to the text when centering the text in Webflow, you can follow these steps:

  1. Select the text and icon elements: In the Webflow Designer, select both the text element and the icon element that you want to center.

  2. Wrap the text and icon in a container: Right-click on the selected elements and choose "Wrap with Link Block" or "Wrap with Div Block" from the context menu. This will create a container around the text and icon.

  3. Set the container to display as flexbox: With the container selected, go to the Styles panel on the right-hand side. Under the "Display" section, choose "Flex" from the dropdown menu. This will enable flexbox properties for the container.

  4. Align items to center: Still in the Styles panel, scroll down to the "Flexbox" section. Set the "Align" property to "Center". This will vertically align the text and icon within the container.

  5. Adjust spacing if needed: If you want to add some spacing between the text and the icon, you can adjust the "Margin" or "Padding" properties of the text and icon elements within the container. This will allow you to achieve the desired visual balance.

By following these steps, you can ensure that the icons stay connected to the text even when you center the text in Webflow design.

Additional Questions:

  1. How do I center text in Webflow?
  2. How can I vertically align elements in Webflow?
  3. What is flexbox and how can I use it in Webflow?