In our example, we're applying '1.2' (you could use 'normal' if you prefer). If you use '1', the input elements won't accept it, and they'll be taller than the buttons.

The line-height value needs to be slightly bigger than '1'.

Even tough we don't plan on adding a visible border to the buttons, we apply it anyway (with a transparent color) to make sure buttons and inputs have the same height.

We apply the same vertical padding, font-size, line-height, and border-width to buttons and inputs.

We set the display value of the buttons equal to inline-flex so that we can use the justify-content and align-items properties to center the content (particularly handy if you place an icon inside a button).

Justify-content: center /* center the content horizontally */Īlign-items: center /* center the content vertically */īorder-color: transparent /* hide button border */ * make sure properties affecting height have same value */ With that in mind, let's define the basic style of buttons and inputs:

The height and vertical alignment of buttons and inputs is determined by the combination of borders, padding, font-size, and line-height. However, using padding (instead of a fixed height) is safer because the button will adapt to its content under all circumstances. *An alternative approach would be setting a fixed height (e.g., height: 40px ) and a line-height equal to the height value (e.g., line-height: 40px ) for all buttons and inputs. font-size, line-height, padding, and border determine the size of buttons and inputs*.buttons and input elements have the same height.the content of buttons and input elements is perfectly aligned.⚡️ Design 10x faster with our library of COMP_NUM components → In this article, we'll look at how to center the content of buttons and input elements using line-height, padding, and flexbox. Have you ever struggled with vertically aligning the content of your interactive elements? You're in good company.

Inline flex center