必威体育Betway必威体育官网
当前位置:首页 > IT技术

Vertical-Align,你应该知道的一切

时间:2019-08-07 16:11:08来源:IT技术作者:seo实验室小编阅读:87次「手机版」
 

vertical-align

对哪些元素可以使用Vertical-Align

vertical-align用于对齐行内元素。所谓行内元素,即display属性值为下列之一的元素:

inline

inline-block

inline-table (本文未涉及)

其中,行内元素(inline element)就是包含文本的标签。

而行内块元素(inline-block element),顾名思义,就是位于行内的块元素。可以有宽度和高度(可以由其内容决定),也可以有内边距、边框和外边距。

行内级元素会相互挨着排成行。如果一行排不下,就会在下方再建一行。所有行都会创建所谓的行盒子,行盒子装着自己行中的所有内容。内容的高度不同,行盒子的高度也不同。在下面的示意图中,行盒子的顶部和底部用红色点线表示。

在这里插入图片描述

这些行盒子限定了我们可以影响的范围。在行盒子内部,可以通过vertical-align来对齐个别元素。那么,相对于什么来对齐元素呢?

基线与外边界

垂直对齐最重要的参考点,就是相关元素基线。某些情况下,行盒子的上下外边界也会成为参考点。下面我们就来看一看相关元素类型的基线和外边界。

行内元素

在这里插入图片描述

这里有三行文本紧挨着。红线表示行高的顶边和底边,绿线表示字体高度,蓝线表示基线。左边这一行,行高与字体高度相同,因此上下方的红色和绿线重叠在了一起。中间一行,行高是font-size的两倍。右边一行,行高为font-size的一半。

行内元素的外边界与自己行高的上、下边对齐。行高比font-size小不小并不重要。因此上图中红线同时也就表示外边界。

行内元素的基线是字符恰好位于其上的那条线,也就是图中的蓝线。大致来说,基线总是穿过字体高度一半以下的某一点。

行内块元素

在这里插入图片描述

从左到右:包含留内内容(“c”)的行内块、包含流内内容且设置了溢出(overflow: hidden)的行内块和未包含流内内容(但内容区有高度)的行内块。红线表示外边距的边界,黄色是边框,绿色的内边距,蓝色是内容区,蓝线是每个行内块元素的基线。

行内块元素的外边界即其外边距盒子的上、下两边,也就是图中的红线。

行内块元素的基线取决于元素是否包含流内内容:

有流内内容的行内块元素,基线就是正常流中最后内容元素的基线(左)。这个最后元素的基线是按照它自己的规则找到的。

有流内内容但overflow属性值不是visible的行内块元素,基线就是外边距盒子的底边(中)。也就是与行内块元素的下外边界重合。

没有流内内容的行内块元素,基线同样是外边距盒子的底边(右)。

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读