目标

  • 理解

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

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. Inventor安装失败怎样卸载重新安装Inventor，解决Inventor安装失败的方法总结

    技术帖:Inventor没有按照正确方式卸载,导致Inventor安装失败.楼主也查过网上关于如何解决Inventor安装失败的一些文章,是说删除几个Inventor文件和Inventor软件注册表就 ...

  2. 创建ros消息时出现：Unable to load msg [planning/Num]: Cannot locate message [Num]: unknown pack.....

    创建ros消息可参考创建ROS消息和ROS服务. 按照这个教程进行创建的过程中出现了如下错误: Unable to load msg [msgs/locate]: Cannot locate mess ...

  3. 前后端登录注册之node剖析与token的使用状态

    登录模块功能详解 1.用户名密码的格式验证 由前端完成,根据需求自行决定,不加叙述 2.点击提交按钮思路详解 前端将用户名 以及加密后的密码还有验证码输入的内容统一发给后端  由后端和数据库的数据进行 ...

  4. 使用epoll实现简单的服务器

    1. 头文件 #ifndef __TCP_SERVER_H__ #define __TCP_SERVER_H__ #include <unistd.h> #include <stdi ...

  5. ORACLE学习笔记-ORACLE（基本命令）

    --查看VGA信息: show sga; select * from v$sgastat;--可以通过以下几个动态性能视图查看信息: V$sysstat                系统统计信息 V ...

  6. 08查找满足条件的n个数

    第一节.寻找和为定值的两个数 题目:输入一个数组和一个数字,在数组中查找两个数,使得它们的和正好是输入的那个数字.要求时间复杂度是O(n).如果有多对数字的和等于输入的数字,输出任意一对即可. 例如输 ...

  7. UIImageView xib里面拉伸图片技巧

    拉伸图片的时候代码里和xib里面的图片名字去掉@2x,但是原始图片文件得要xxx@2x.png The X and Y values seem to be the positions for the ...

  8. nn.moduleList 和Sequential由来、用法和实例 —— 写网络模型

    对于cnn前馈神经网络如果前馈一次写一个forward函数会有些麻烦,在此就有两种简化方式,ModuleList和Sequential.其中Sequential是一个特殊的module,它包含几个子M ...

  9. BZOJ 1935 Tree 园丁的烦恼 CDQ分治/主席树

    CDQ分治版本 我们把询问拆成四个前缀和,也就是二维前缀和的表达式, 我们把所有操作放入一个序列中 操作1代表在x,y出现一个树 操作2代表加上在x,y内部树的个数 操作3代表减去在x,y内部树的个数 ...

  10. display：flex; justify-content:space-between; 最后一行显示内容无法靠左显示

    给父元素添加同每行展示列数一样(展示列表最多的)的子元素. 子元素设置样式: width:同子元素一样的width : height:0;