[F6] Button Text Vertical Alignment -...

User 2706435 Photo


Ambassador
444 posts

In the past I have ,mutually created my own elements. This time I used an application element.
I can not seem to find a way to vertically center text in the button. There appears to have no Flex available option for me to use. Do I need to manually create my own element?
User 379556 Photo


Registered User
1,533 posts

The Button item in the Content Elements pane seems to have the text vertically centred already, and so I guess that the Button Link item is the problem.

For a Button Link with a fixed height, I do vertical centering via top padding, judging the amount needed by eye. In other circumstances vertical centering of text in a Button Link element would, I think, be tricky, even with hand coding, but there is a very simple work-around in SD as follows.

Instead of using a Button Link, one can style a Link container in the same way as one would style the button, and put a text element inside it for the words. Styling the Link Container as follows will give both horizontal and vertical centering of the text -
Display: Flex
Align Items: Center
Justify Content: Center.

I attach a simple example.

When using Link Containers it's worth remembering that one controls the text colour, size, decoration etc. via the Typography section of the Link Container itself. Only the font is styled via the Typography section of the text element.

Frank
Attachments:
User 187934 Photo


Senior Advisor
20,181 posts

Set the button to Display : Block
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2706435 Photo


Ambassador
444 posts

Thanks Eric and Frank.
I did end up making my own link container. I was doing this before, but was trying to revisit it because now I am having rows of buttons. Some buttons have two lines of text, or a hover will display two lines of text. Before it was never a problem. Eric, the Block gets the buttons to vertically stack, but I don't think it gets the text inside the standard button element to center vertically with respect to the button.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.