How can I center button text both horizontally and vertically in Webflow without using flexbox?
TL;DR
- Set Text Align to center in the Typography section to center text horizontally.
- Adjust top and bottom padding and set line height to match the font size for vertical centering.
To center button text both horizontally and vertically without using Flexbox in Webflow, you can use padding and text alignment.
1. Use Text Alignment for Horizontal Centering
- Select your button in the Webflow Designer.
- In the Style panel, go to the Typography section.
- Set Text Align to center to horizontally center the text within the button.
2. Use Padding for Vertical Centering
- Still in the Style panel, manually adjust the Top and Bottom Padding of the button so that the text sits in the vertical center.
- Example: Set Padding Top: 10px and Padding Bottom: 10px, and adjust until the vertical spacing looks balanced.
- This works best when the button’s line height is also adjusted to match the text size.
3. Check Line Height
- Still under Typography in the Style panel, make sure the Line Height is set appropriately.
- A good rule is to match the line height closely to the font size for better vertical centering.
Summary
To center button text without Flexbox, set Text Align to center for horizontal centering, adjust padding for vertical centering, and fine-tune line height as needed. This method keeps layout simple but may require manual adjustments for perfect balance.