目标

  • 理解

    • 能说出 行高 和 高度 三种关系
    • 能简单理解为什么行高等于高度单行文字会垂直居中
  • 应用
    • 使用行高实现单行文字垂直居中
    • 能会测量行高

3.1 行高测量

行高的测量方法：



3.2 单行文本垂直居中

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

行高和高度的三种关系

  • 如果 行高 等 高度 文字会 垂直居中
  • 如果行高 大于 高度 文字会 偏下
  • 如果行高小于高度 文字会 偏上
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 50px;

            background-color: pink;

            line-height: 50px;

        }

    </style>

</head>

<body>

    <div> 文字垂直居中 </div>

</body>

</html>

0015 行高那些事：line-height的更多相关文章

  1. iOS 根据字符串内容动态计算行高

    + (CGFloat)textHeightFromTextString:(NSString *)text width:(CGFloat)textWidth fontSize:(CGFloat)size ...

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. wpf datagrid row height 行高自动计算使每行行高自适应文本

    wpf 的datagrid的行高 要么是Auto,要么是定值:但会带来麻烦就是每行行高都一样. 当需要按内容(主要是wrap 换行的textbox或textblock)来动态调整行高的时候,需要用到d ...

  4. css中line-height行高的深入学习

    之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...

  5. 第2月第24天 coretext 行高

    1.NSMutableAttributedString 行高 NSMutableAttributedString *attributedString = [[NSMutableAttributedSt ...

  6. CSS行高——line-height

    初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...

  7. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...

  8. 深入理解 CSS 中的行高与基线

    1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线包裹的区域(行内元素display ...

  9. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

随机推荐

  1. CODE FESTIVAL 2017 qual B C - 3 Steps【二分图】

    CODE FESTIVAL 2017 qual B C - 3 Steps 题意:给定一个n个结点m条边的无向图,若两点间走三步可以到,那么两点间可以直接连一条边,已经有边的不能连,问一共最多能连多少 ...

  2. 【vb.net机房收费系统】之没有包含要从继承的组件的已生成程序集 标签： vb.net继承 2015-05-02 15:19 1012人阅读

    在敲到组合查询这个功能的时候,需要用到窗体的继承,但是在新建继承窗体的时候,出现了错误(没有包含要从继承的组件的已生成程序集).如下图: 问题的产生:当时没怎么注意,也不知道怎么弄的,最后反正是继承上 ...

  3. poj 3169 Layout （差分约束）

    3169 -- Layout 继续差分约束. 这题要判起点终点是否连通,并且要判负环,所以要用到spfa. 对于ML的边,要求两者之间距离要小于给定值,于是构建(a)->(b)=c的边.同理,对 ...

  4. hdu 5723 Abandoned country（2016多校第一场） （最小生成树+期望）

    Abandoned country Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  5. hdu 4476 Cut the rope (2-pointer && simulation)

    Problem - 4476 题意是,给出若干绳子,对同一根绳子只能切割一次,求出最多能获得多少长度相同的绳子. 代码中,s是最大切割长度,而当前切割长度为t/2. 代码如下: #include &l ...

  6. 2018-8-10-WPF-使用-VisualStudio-2017-项目文件

    title author date CreateTime categories WPF 使用 VisualStudio 2017 项目文件 lindexi 2018-08-10 19:16:53 +0 ...

  7. 达观数据CTO纪达麒:小标注数据量下自然语言处理实战经验

    自然语言处理在文本信息抽取.自动审校.智能问答.情感分析等场景下都有非常多的实际应用需求,在人工智能领域里有极为广泛的应用场景.然而在实际工程应用中,最经常面临的挑战是我们往往很难有大量高质量的标注语 ...

  8. NLP进阶之（七）膨胀卷积神经网络

    NLP进阶之(七)膨胀卷积神经网络1. Dilated Convolutions 膨胀卷积神经网络1.2 动态理解1.2.2 转置卷积动画1.2.3 理解2. Dilated Convolutions ...

  9. java基本数据类型和包装类相互转换

    把基本数据类型 → 包装类: 通过对应包装类的构造方法实现 除了Character外,其他包装类都可以传入一个字符串参数构建包装类对象. 包装类 → 基本数据类型 包装类的实例方法xxxValue() ...

  10. MySQL 数据库中如何把A表的数据插入到B表?

    web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节省大量代码 ...