方法一：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）的更多相关文章

  1. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  2. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  3. html之改变图片透明度而不改变文字的透明度--两种方法实现

    图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...

  4. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  5. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  6. java实现图片文字识别的两种方法

    一.使用tesseract-ocr 1.    https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...

  7. 选中没有选中的复选框，匹配含有某个字符串的正则，json取值的两种方法，把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  8. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  9. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

随机推荐

  1. C语言程序判断文件夹是否存在

    #include <stdio.h> #include <io.h> int main(void){ if ( !access("C://Users/hui" ...

  2. PCB MS SQL CLR聚合函数(函数作用，调用顺序,调用次数) CLR说明

    用CLR写函数:标量函数,表值函数 很好理解,如果用聚合函数则不是那么好理解了, 这里将CLR函数说明一下,其实关键是对聚合函数说明 用CLR写聚合函数关键点,是要理解CLR与SQL是如何进行数据交互 ...

  3. hdu3511-Prison Break

    纪念一下人生中第一道扫描线算法的题.....其实不是严格上的第一道...第一次遇到的那个至今没过..... 题目链接: http://acm.hdu.edu.cn/showproblem.php?pi ...

  4. POJ 3230 DP

    f[i][j]=max(f[i][j],f[i-1][k]-a[k][j]+b[i][j]) i->第i天 j-–>到第j个城市 #include <cstdio> #incl ...

  5. python--6、re模块

    re模块 用于在正则表达式匹配操作. python中为了避免实现输出'\','\n'字符的转义问题(如正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python ...

  6. Hadoop学习笔记（一）Hadoop的单节点安装

    要想深入学习Hadoop分布式文件系统,首先需要搭建Hadoop的实验环境,Hadoop有两种安装模式,即单节点集群模式安装(也称为伪分布式)和完全分布式模式安装,本节只介绍单节点模式的安装,参考官方 ...

  7. ArcGIS API For Android Errors汇总

    API客户端异常错误的发生通常是由于不正确的方法参数,对象状态依赖,或网络条件. //*******推荐使用方法,按下Ctrl+F搜索错误代码,再查看与代码对应的解释.********// ArcGI ...

  8. 使用CMD建立指定格式的文件

    一.建立空文件的几种方法1.cd.>a.txtcd.表示改变当前目录为当前目录,即等于没改变:而且此命令不会有输出.>表示把命令输出写入到文件.后面跟着a.txt,就表示写入到a.txt. ...

  9. 【Linux】Ubuntu输入法不能开机自启的解决方法

    操作系统:Ubuntu Kylin 16.10 自从操作系统安装了搜狗输入法以后,每次重启电脑都需要手动启动Fcitx,才能启动搜狗输入法.下面给大家介绍输入法开机自启的解决方法: 操作系统的用户家目 ...

  10. DNN结构演进History—CNN( 优化，LeNet, AlexNet )

    本文相对于摘抄的文章已经有大量的修改,如有阅读不适,请移步原文. 以下摘抄转自于维基:基于深度学习的图像识别进展百度的若干实践 从没有感知域(receptive field) 的深度神经网络,到固定感 ...