CSS line-height概念与举例 单行多行文本垂直居中

2024-05-09 11:38

本文主要是介绍CSS line-height概念与举例 单行多行文本垂直居中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37

定义

两行文字基线之间的距离。

基线的大体位置

image

基线的位置可以看成x字母下边缘的位置。
不同字体的基线位置会有微小的差别。

文本中的几条线:

image

行高示意图:

image

一行文本的行高为:上间距 + 文本的高度+下间距,并且上间距是等于下间距的。
我们还可以基本上这样认为:行高是两行文字基线之间的距离,也是两行文字顶线之间的距离,两行文字中线之间的距离。

行内框盒子模型

  • 内容区域 content area
  • 内联盒子 inline boxes
  • 行框盒子 line boxes
  • 包含盒子 containing box

    内容区域 content area

围绕盒子看不见的区域,大小与font-size相关,高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。

image

内容区域只与字号与字体有关,与行高无关!
在宋体字体下,内容区域高度 = 字体大小。在其他字体下,内容区域高度 ≈ 字体大小

内联盒子 inline boxes

内联盒子不会让内容成块显示,而是显示成一行,如果外部包含inline标签的话(span,a,em等),则属于内联盒子。如果只有文字的话,就是"匿名内联盒子"。

image

行框盒子 line boxes

每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成的。

image

包含盒子 containing box

由一行一行的行框盒子组成的。

image

总之:包含盒子包括行框盒子包括内联盒子

line-height的属性值

  • 对于块级元素,line-height指定了元素内部line-boxes的最小高度
  • 对于非替代行内元素,line-height用于计算line-box的高度
  • 对于替代行内元素,例如input、button,line-height没有影响

    normal

取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。

line-height: normal;

number

所用的值是无单位数值乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。

line-height: 3.5;

length

指定 用于计算 line box 的高度。

line-height: 3em;

percentage

与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。

line-height: 34%;

inherit

IE8+
input框等元素默认行高是normal,可以使用

line-height: inherit ;

让元素可控性更强。

line-height:1.5、line-height:150%、line-height:1.5em的区别

em的效果跟%是一样的。

line-height:1.5

所有可继承元素根据font-size重新计算行高。

<div id="father"><div id="son">我的font-size为60px</div>
</div>
#father{font-size:12px;line-height:1.5;width:300px;
}
#son{font-size:60px;color:white;
}

image

此时,#son元素的line-height为60*1.5=75px;

line-height:150%/line-height:1.5em

当前元素根据font-size计算行高,将计算出来的值继承给下面的元素。

<div id="father"><div id="son">我的font-size为60px</div>
</div>
#father{font-size:12px;line-height:150%;width:300px;
}
#son{font-size:60px;color:white;
}

image

此时#son元素的line-height为12px*150%=18px。因为#son元素的文本框高度是60px,所以#son元素的半行间距约等于(18-60)/2 = -21px;所以#son元素内的两行字重合在一起了。

推荐使用无单位数值给line-height赋值

line-height与图片的表现

<div><img src="muke/resource/photo/1_0.jpeg">
</div>
div{background-color: #abcdef;
}
img{width: 300px;height: 300px;
}

image

注意到图片下方有很窄的一条空隙,使得图片的高度不能填充父容器的高度。
现在在图片之后加入一些文字的话:

<div><img src="muke/resource/photo/1_0.jpeg"><span>xxxx我是图片之后的文字</span><br>
</div>
div{background-color: #abcdef;
}
img{width: 300px;height: 300px;
}
span{background-color: white;
}

image

注意到图片底部是与字母x的下边缘(基线)对齐的,所以我们可以联想到,图片为了与之后文字的基线对齐(图片之后没有文字可以想象成有文字),所以图片下面才有了一小段空隙。为什么图片要与文字的基线对齐呢?因为vertical-align的属性默认是baseline。以后有时间再细细研究一下vertical-align这个属性。

如何消除图片下面的空隙

  • 图片底线对齐
img{width: 300px;height: 300px;vertical-align:bottom;
}

这样的话图片就与文字的底线对齐,也就消除了空隙。

  • 图片块状化
img{width: 300px;height: 300px;display:block;
}

因为vertical-align这个属性只对行内元素有效,所以将图片变为块状元素可以使得vertical-align:baseline失效。

  • 行高足够小,使得基线上移
div{background-color: #abcdef;line-height:0;
}

image

这里有个疑问,此时基线按理说应该比图片底端还要向上,为什么图片没有与基线对齐?

单行文本垂直居中原理

<div>单行文本垂直居中
</div>
div{background-color: #abcdef;height: 300px;line-height: 300px;
}

image

文字居中,即文字内容区域的一半 + 内容区域顶部到父容器上边缘 = 父容器高度的一半。而内容区域顶部到父容器上边缘 = 上间距 = 下间距,所以文字内容区域 + 上间距 + 下间距 = 父容器高度。因为文字内容区域 + 上间距 + 下间距 = line-height,所以当line-height = height时,单行文本居中。也就是文本的中线与父容器的中间线近似重合。

多行文本居中

<div id="father"><div id="son">多行文本垂直居中<br>多行文本垂直居中<br>多行文本垂直居中<br></div>
</div>
#father{line-height:300px;background-color: #abcdef;height: 300px;
}
#son{line-height: normal;display: inline-block;vertical-align: middle;border: 1px red solid;
}

image

多行文本居中,我们可以将这多行文本看成一个整体,即一行,问题转换为上面的单行文本居中,所以我们让父元素的height = line-height。为了覆盖掉继承过来的line-height,我们在#son元素中使用line-height:normal。看下效果:

image

貌似偏上了一些,为了让整体文本的中线与父容器的中间线近似重合。我们可以添加vertical-align: middle。让整体放置于父元素的中部,效果就是本节开始的那张图片的效果。

参考资料:http://www.imooc.com/learn/403
http://www.imooc.com/article/7767
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

这篇关于CSS line-height概念与举例 单行多行文本垂直居中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/973306

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

Python中局部变量和全局变量举例详解

《Python中局部变量和全局变量举例详解》:本文主要介绍如何通过一个简单的Python代码示例来解释命名空间和作用域的概念,它详细说明了内置名称、全局名称、局部名称以及它们之间的查找顺序,文中通... 目录引入例子拆解源码运行结果如下图代码解析 python3命名空间和作用域命名空间命名空间查找顺序命名空

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript