Forum Academy Marketplace Showcase Pricing Features

Centered Button Text

Trying to find out if this is normal and should be this way or if its a bug.

The text within a button is not centered vertically. I see that I can change the ‘Line Spacing’ to move the text slightly but that only works for that specific button height. In the image below both buttons utilize the same Style and have a line spacing of 2.9. This 2.9 centers the text for the bottom button which has a height of 48. The top button has a height of 38 and its text is pushed to the bottom because of the 2.9 Line Spacing.

Am I really going to have to create new styles for every single button size? or can we get just a general ‘top/center/bottom’ alignment for buttons regardless of size.

What browser are you using? My button texts are automatically centered all the time, so this is strange to see

I’ve used Safari and Chrome. they both do it

Can you share a link to your app editor? I’m curious to see how your buttons are set up. I leave all the line spacing settings to 1, and the text stays centered vertically no matter how I stretch or squish the button.

Can i get an image of one of your buttons with a line spacing of 1?

When I do a line spacing of 1 it looks centered but its slightly high. Here are the exact settings I got.

top button is 175 Wide by 38 Height
bottom button is 175 and 48 height.

One workaround for this is to use a text field for a button, then format the text field to look like a button (with a dark background, rounded corners, hover effect, etc.).

Yea I have thought about that. Was just hoping to not have to go through all the buttons in my app and change them along with all the workflows that are associated with each one.

Here’s an app I’m in progress on: http://managermanager.io/version-test/launch-splash?debug_mode=true

There are 2 buttons on the screen, I haven’t changed any of the vertical alignment properties of any of them.

Was just trying different things. Looks like the font I’m using is the problem. If I use the Khula (regular) font it offsets it. If I just use Arial it keeps it centered with a line spacing of 1. So maybe not a bug with the button but a bug with the font.

You should be able to get the vertical spacing right on buttons too. Not worth the effort to switch them to text if it’s more than a few buttons.

Don’t know what you’re running into, specifically. Perhaps you have it set to a style that has vertical padding that’s different than what you need for it to be vertically centered?

Buttons don’t have padding. Just the line spacing and with the Khula font its not working correctly.

This topic was automatically closed after 14 days. New replies are no longer allowed.