首页 > 代码库 > 实现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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。