Center the Button Text

Why is Your Button Text Not Centered?

If you’ve noticed that your button text appears off-center or misaligned, it may be due to size settings or additional padding applied to the button. Common causes include:

• Modified Size Settings: Adjusting the width and height of the button can sometimes affect how the text is centered.
• Additional Padding: Uneven padding inside the button may push the text off-center.
• Alignment Settings: If vertical alignment isn’t properly set, the button label may look slightly higher or lower than expected.

How to Center the Button Text in GemPages?

Follow these steps to align the text center within your button and ensure your buttons look professional.

#1. Reset or Adjust Padding

Step 1: In the editor, click on the Button Element to open its settings panel.

Step 2: Locate the Padding under the Size section.

Step 3: If the padding is uneven, adjust it so that the spacing is equal on all sides. This helps realign the text inside the button.

#2. Check the Button’s Width and Height

Step 1: Go to the Size settings.

Step 2: Ensure the button height is proportionate to its width, so the text remains in the center.

#3. Use Custom Code

If padding/size tweaks don’t fully center the button text, add a small custom CSS rule. This gives you pixel-perfect horizontal and vertical alignment.

Step 1: Right-click on the button element and select Custom Code.

Step 2: In the code editor, copy and paste the following code into the box under the CSS tab.

 display: flex;

  align-items: center;

  justify-content: center;

Step 3: Save the updates and check the result.