input内容右对齐_按钮和输入的垂直文本对齐

点上面“东哥IT笔记”，关注并星标

每天一篇业界最新技术分享

---

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

基本的按钮和输入风格

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

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

<input type="text"value="Input element"><button>Buttonbutton> <style>  .btn, .form-control {    /* reset user agentstylesheet */    background-color:transparent;    padding: 0;    border: 0;    border-radius: 0;    color: inherit;    appearance: none;     /* make sure propertiesaffecting height have same value */    font-size: 1em;    line-height: 1.2;    padding: 0.5emvar(--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;}