Columns are an important component of a webpage. Here's a workaround based on creating height utility classes that behaves slightly differently when applied to buttons and inputs. In such cases, we can remove the vertical padding and set the line-height equal to the height value. There may be cases where we need to set a fixed height for our button/input elements, and the default line-height will break the alignment. Make 'em pretty #Īll left to do is creating a bespoke theme for our buttons and inputs: You can also scale them up/down taking advantage of the Em units. After all, we're just pushing the content using padding and border. You can modify their font-size (e.g., set a fixed font-size) or apply a different font-family, and it won't affect the alignment. This basic style will ensure buttons and input elements have the same height and that their content is vertically aligned. 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.
*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.
⚡️ 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.
0 kommentar(er)
