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

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

基本的按钮和输入风格

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

padding 
Button 
line-height 
font-size

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

<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,这些修改都不会影响对齐。

进一步优化

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

Machine generated alternative text:
HTML 
scss 
transparent; 
Result 
Input element 
Input element XL 
Button XL 
O Button 
EDIT ON 
CODEPEN 
Button 
. btn, . form-control 
background -color : 
padding: a; 
border: a; 
border-radius: O; 
color: inherit; 
appearance: none; 
// make sure properties affecting height 
same value 
font-size: lem; 
line-height: 1.2; 
padding: ø.5em var(- -padding-x); 
border-width: 2px; 
border-style: solid; 
o_sx 
o_25x

例外

也许你会遇到一些情况,我们需要设置固定高度的按钮和输入元素,而默认的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;
}
Machine generated alternative text:
HTML 
scss 
height utility classes 
. height-3e, . height-4ø, . height-5€ 
height: var(- -height); 
&.btn, &. form-control { 
line-height: var(- -height); 
padding-top: e; 
padding-bottom: e; 
. height- 3ø 
- -height: 3øpx; 
. height-4ø 
- -height: 
4øpx; 
Result 
Input element 
Input element 
Input element 
EDIT ON 
CODEPEN 
Button 
Button 
Button 
o_sx 
o_25x

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *