Center text vertically without using padding

  • Resolved andrew_long15

    (@andrew_long15)


    4 years, 1 month ago

    Depending on length of text, sometimes my button has one line of text, sometimes two lines.

    Using the padding feature to vertically centre the text does not work in this case because without using padding the “one line of text” will be at the top of the button, whereas the “two lines of text” will be centred. If I use padding, then I can centre the “one line of text”, but then the “two lines of text gets pushed down”.

    So I am forced to use two different buttons simply because some have more text than others.

    See this page: https://greatnessu.com/acm-specialist-register/ Where I had to copy a button so there would be one with padding=3 and one with padding=13. This is a clunky solution.

    Is it possible to centre-align text VERTICALLY in the button without using padding?

Viewing 1 replies (of 1 total)
  • Plugin Author Bas Schuiling

    (@basszje)

    Sadly, pure vertical centering is a quite complicated thing on webpages. At the moment we have not something simple like how the text centering does it.

    I think you can do the following:

    – Put both width and height to 0 .

    – Add padding for everything (left, right, top, bottom) . Best result is usually to give same padding for left, right but give the top a little more padding than the bottom.

    – If you always use those buttons in a column, you can also put the width to a percentage, i.e. 100% to make all buttons fill out the same column width.

Viewing 1 replies (of 1 total)
  • The topic ‘Center text vertically without using padding’ is closed to new replies.