首页 > 代码库 > 实现icon和文字垂直居中的两种方法-(vertical-align and line-height)

实现icon和文字垂直居中的两种方法-(vertical-align and line-height)

方法一:vertical-align

在w3school定义:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

百思不得骑姐

然后Google,反正在w3schools上面并没有找到定义

仅仅能写代码測试

而后个人理解,才作出如此解释》

该属性作用的对象:行内元素(inline,inline-block也有行内属性) 其它table-cell 

经常使用属性值:top middle bottom

个人理解

技术分享


个人觉得,普通情况下,这些字母自发“坐落”的这条线就是基线。然后两行之间距离就是line-height(一会用到的另外一种方式) ,至于设置top middle bottom后基线怎么对齐,解释不清楚。

測试top middle bottom效果是这种

技术分享


方法2:使用line-height

在块元素内。设置line-height和height一致,可使行内元素垂直居中。注意这里使用行高的单位最直接的方式是使用px。假设使用的是百分比。比方使用150%,那么150%是依据父元素的字体大小计算出行高,而且子元素依旧沿用这个计算后的行高。假设使用1.5,则是依据子元素自己字体的大小去乘以1.5来计算行高。另,1.5em等也是依照150%的情况来算的。


两种方法效果见点我看效果



实现icon和文字垂直居中的两种方法-(vertical-align and line-height)