如何理解LINE-HEIGHT与VERTICAL-ALIGN

原创 2018年04月17日 17:31:46

1.背景介绍

随着互联网行业的发展,人们对网页的要求已经不限于传递信息,如何将网页设计的更合理,能更容易的让用户获取信息也愈发重要。而文字作为网页信息的主要载体,它的样式对用户交互的影响十分巨大,本次小课堂将跟大家分享两个关于文字样式的标签:line-height和vertical-align。

2.知识剖析

1.line-height基本概念
定义:行高是指文本行基线baseline之间的垂直距离
2.vertical-align基本概念与应用
定义:使行内元素的基线相对于该元素所在行的基线的垂直对齐
默认值baseline:元素基线与父元素基线对齐
众所周知,vertical-align支持很多属性值,关键字值:vertical-align等等: middle;长度值:vertical-align: 4px等等;百分比值:vertical-align: 10%..
注意:vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的。

3.常见问题
为什么在div内插入图片,会发现图片下面有一段空白间隙?
4.解决方案
1,图片默认是inline水平的,而vertical-align对块状水平的元素无感。

   因此,我们只要让图片display水平为block就可以了,我们可以直接设置display或者浮动、绝对定位等

6.拓展思考
都用什么方法可以实现垂直居中?

1.想要让单行文字垂直居中居中,可以使用刚刚讲到的line-height属性
2.使用刚刚讲到的vertical-align属性实现居中
3.使用盒子模型
4.使用table布局
把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
5.使用flex弹性布局
设置父元素display:flex,使用align-items:center
6.使用绝对定位
绝对定位后设置top和left为50%,然后纵向变化50%的自身高度
7.参考文献:点击打开链接
8.更多讨论
为什么我的vertical-align属性不起作用?
我们知道了vertical-align是垂直对齐的意思,不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果,
   会发现有时候可以,有时候又不起作用,不知道为什么?因为只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。



 问题1: line-height是哪里到哪里之间的距离?

 回答: line-height是元素的行高 

 问题2: 要使用VERTICAL-ALIGN属性要满足哪些条件?

 回答:点击打开链接

 问题3:多行文本如何垂直居中?

 回答:点击打开链接

1.想要让单行文字垂直居中居中,可以使用刚刚讲到的line-height属性

CSS深入理解vertical-align和line-height基友关系的复杂现象

为了让任意个数的列表最后一行也是对齐排列,在列表最后会辅助列表等宽的空标签元素来占位,类似下面红色高亮HTML代码:.justify-fix { display: inline-block; widt...
  • taotaomin99
  • taotaomin99
  • 2017-06-13 21:39:55
  • 105

line-height和vertical-align 属性的对比解析n

一  明确几个基本概念: 1  内容区:由width和height决定大小; 2  行内框:是指行内元素的边框,可以理解为和内容区大小相等。 3 行框 :行框的高度等于本行中所有行内元素中行内框的最大...
  • qq_35809245
  • qq_35809245
  • 2016-12-09 18:15:15
  • 357

line-height与vertical-align的区别和联系

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响。 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line...
  • zxyzxy168
  • zxyzxy168
  • 2017-03-08 12:28:05
  • 93

对于line-height的一些理解

凡是有inline-block元素的地方就会有line-height的存在,就算你不设它的值,line-height依然通过继承来的fontsize等属性获得与之相匹配的line-height,这也是...
  • qq_34099161
  • qq_34099161
  • 2016-09-09 11:53:10
  • 1189

text-align,vertical-align,line-height居中布局

  • 2016年11月09日 09:52
  • 3KB
  • 下载

CSS中,display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨

在CSS中,line-height属性往往是我们调整行距的方法,今天这篇文章来尝试探讨这一属性,首先了解几个概念:1. 块级元素与行内元素:    HTML元素分为两大类,块级元素(包括p、h1、di...
  • weixin_39181833
  • weixin_39181833
  • 2018-04-04 11:58:53
  • 99

深入理解line-height

line-height,指的是两行文字【基线】之间的距离。 基线:一般就是小写英文字母x的下划线 行内框盒子模型(所有内联元素都有关,以下由内至外讲解) 举例: 啦啦啦啦啦啦啦啦啦啦啦啦啦啦 1、...
  • u012062760
  • u012062760
  • 2016-10-24 22:32:33
  • 772

深入理解line-height与vertical-align

ine-height、font-size、vertical-align是设置行内元素布局的关键属性。这三个属性是相互依赖的关系,改变行间距离、设置垂直对齐等都需要它们的通力合作...
  • qq_26222859
  • qq_26222859
  • 2016-04-10 20:14:41
  • 169

vertical-align && line-height

vertical-align && line-height 1. vertical-align: 百分比, 可以体现出上面的两个属性之间是有很大的关联的。 2. vertical-alig...
  • liyuanyuan_0511
  • liyuanyuan_0511
  • 2016-09-05 17:24:11
  • 197

[CSS3]对line-height的理解,什么时候使用line-height合适

line-height行高。自己写的时候总是不能随意使用这个样式,要么忘了加,要么用起来不知所措,说明对它不甚熟悉,不知道什么情况下应该使用,看了一些很有用的文章,贴在这里 1.如果一个标签...
  • wildcat001
  • wildcat001
  • 2017-09-06 17:41:48
  • 286
收藏助手
不良信息举报
您举报文章:如何理解LINE-HEIGHT与VERTICAL-ALIGN
举报原因:
原因补充:

(最多只允许输入30个字)