Tagged: 垂直对齐

0

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

你曾经苦恼于文本的垂直对齐吗?我想很多的前端开发者都会遇到这样的烦恼吧,那么本文就来给你详细介绍一下如何利用line-height, padding以及flexbox实现相应的对齐功能。 基本的按钮和输入风格 一个按钮和输入的高度以及垂直对齐是由他的边框,padding,字体大小以及line-height决定的。 有了这个理解之后,我们来定义按钮以及输入的基本风格: 这里我们把按钮的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的值。下面是一个例子: