博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现icon和文字垂直居中的两种方法-(vertical-align and line-height)
阅读量:4476 次
发布时间:2019-06-08

本文共 595 字,大约阅读时间需要 1 分钟。

方法一: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%的情况来算的。

两种方法效果见

转载于:https://www.cnblogs.com/cxchanpin/p/7096553.html

你可能感兴趣的文章
Win7 64bit系统下未能加载文件或程序集“System.Data.SQLite”的解决办法
查看>>
信息图表理论之—— 专业媒体数据表格设计(续)
查看>>
npapi两处资料
查看>>
java线程
查看>>
用python读取带密码的excel文件中的数据
查看>>
IE下的firebug调试利器
查看>>
【持续更新】Oracle提权相关
查看>>
java Base64
查看>>
能用存储过程的DBHelper类
查看>>
Node.js学习疑惑整理
查看>>
微信支付开发
查看>>
Linux Pthread 深入解析
查看>>
上传图片的代码段
查看>>
冲刺第五天
查看>>
pyCharm for mac 引入pygame
查看>>
JAVA并发编程学习笔记------锁顺序死锁
查看>>
linux服务器上安装mysql
查看>>
SharpMap实践代码
查看>>
[LeetCode] #5 Longest Palindromic Substring
查看>>
Centos6.9minimal版系统安装图形化界面
查看>>