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?
[F6] Button Text Vertical Alignment -...
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
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
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
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
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.
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.