How to align text and buttons text?

I’ve noticed how the button’s text isn’t centered vertically the way that text is centered vertically. Not sure which of the two is off though. But how do I align them?

The only work around at the moment is to reduce the button eight by 2 pixels. But that’s not very neat and convenient. It’d be much easier to align buttons and text vertically without having to worry of the pixels.

Is there a solution?

Hello you can select ‘center the text vertically’ or adjust the line spacing

Sorry I should have specified that the text is already aligned vertically.

However, there’s no option to align the button’s text. I’m assuming it’s already aligned vertically by default.

How can 2 elements at 45 px height be both aligned in theory but not be aligned in practice?

I’m assuming it’s because your button has a border, that will add difference to the buttons’text position.

If you send me your editor I could take a closer look.

Also maybe try setting the line spacing to 1 vs 1.4 (default), along with Center the text vertically

Line spacing is 1 on both text and button already :frowning:

If its a border issue as @anon57860117 suspects, maybe you can add an “invisible” border to the text elements, ie, border color same as background color, to see if Bubble would then render it the same as the button.

2 Likes

It seems to work out! (there’s maybe a 1px difference, but it’s barely perceptible.

So +1 pixel border on text (invisible) and no border on button! It looks neat now. Thanks.

Glad its better! Also forgot to mention v padding on the text element. Bubble default is 4 for most elements but I don’t think they reveal what padding value is used by default for Buttons–at least it is not shown in the style editor.

Capture

1 Like

I have found the answer. RICH TEXT EDITOR. Is a small link at the bottom right of text input box.

1 Like

thanks @ tikifoxbiz this helped me!