按钮和输入的垂直文本对齐

你曾经苦恼于文本的垂直对齐吗？我想很多的前端开发者都会遇到这样的烦恼吧，那么本文就来给你详细介绍一下如何利用line-height, padding以及flexbox实现相应的对齐功能。

基本的按钮和输入风格

一个按钮和输入的高度以及垂直对齐是由他的边框，padding，字体大小以及line-height决定的。

有了这个理解之后，我们来定义按钮以及输入的基本风格：

<input class="form-control" type="text" value="Input element">
<button class="btn">Button</button>

<style>
  .btn, .form-control {
    /* reset user agent stylesheet */
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    appearance: none;

    /* make sure properties affecting height have same value */
    font-size: 1em;
    line-height: 1.2;
    padding: 0.5em var(--padding-x);
    border-width: 2px;
    border-style: solid;
  }
  
  /* button */
  .btn {
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    --padding-x: 1.2em;
    border-color: transparent; /* hide button border */
  }
  
  /* input */
  .form-control {
    --padding-x: 0.5em;
  }
</style>

• 这里我们把按钮的display设置成了inline-flex，这样我们就可以使用justify-content以及align-items来做中间对齐。
• 我们对按钮和文本使用了同样的vertical padding, font-size, line-height以及border-width。
• 我们并不想给按钮加入特定的边框，所以这里设置成transparent.
• Line-height的值需要比1大一点点。假如使用1，输入的元素就会有问题，所以我们这里使用的是1.2，当然你也可以使用normal。

上面这样的基本风格设置可以保证按钮和输入元素有同样的高度，以及他们的内容是垂直对齐的。当然，你可以修改他们的font-size，或者设置不同的font-family,这些修改都不会影响对齐。

进一步优化

下面我们需要做的是为按钮和输入设置定制主题。

例外

也许你会遇到一些情况，我们需要设置固定高度的按钮和输入元素，而默认的line-height会破坏对齐。这种情况下，我们可以把垂直padding去除掉，并且设置line-height等于height的值。下面是一个例子：

.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 {
  --height: 30px;
}

.height-40 {
  --height: 40px;
}

.height-50 {
  --height: 50px;
}