vertical-align
先看一个例子
<div id="text" style="border: 1px solid #ccc;height:15rem;">
<span style="vertical-align:bottom;border: 1px solid #ccc;display:inline-block;height:2rem">假设我是一个有内容的inline-block</span>
<span style="border: 1px solid #ccc;font-size:5rem;vertical-align:baseline;">我的fontSize=5rem</span>
<span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;height:2rem;width:1rem;"></span>
我是一个不存在的x
</div>
测试图片
上面有一个block盒子,一个line盒子和3个inline(inline-block)盒子,一个文字(匿名)盒子,通常情况下就算盒子内没有文字也会存在一个宽度为0的匿名文字盒子(如果完全是个空盒子则没有)
block盒子就是div,line盒子是由其内部的盒子组合起来的,注意line盒子是由其内部的盒子撑开的,无论div设置多大的高度都和line盒子的大小无关
vertical-align的值,常用的分别有baseline(默认),top,bottom,middle,text-top,text-bottom,sub,super,数值(px,em...),百分比.下面只谈inline(inline-block)盒子的属性值的效果
- baseline(默认值)
基线,盒子的基线大约在其内部文字(匿名)盒子英文字母X的下边缘(不同的字体不同),img标签和空盒子的基线盒子的下边缘,在比如上图中的line盒子的基线就是上图中我是一个不存在的x中x的下方,第一个span的基线就在英文字母i的下边缘,第二个span的基线就在盒子的下边缘,设置为baseline就是让盒子本身的基线和line盒子的基线对齐 - top
顶线,盒子自身的顶部,设置为top是让盒子自身的顶线和line盒子的顶线对齐 - bottom
底线,盒子自身的底部,设置为top是让盒子自身的底线和line盒子的低线对齐 - middle
中线,盒子自身的中间,注意设置此值不是和line盒子的中线对齐,注意设置此值不是和line盒子的中线对齐,注意设置此值不是和line盒子的中线对齐
w3cshoole直接说,middle是把此元素放置在父元素的中部,这应该是不对的
应该是和line盒子中文字(匿名)小写x字母的中线对齐,line盒子中文字(匿名)小写x字母的中线对齐,line盒子中文字(匿名)小写x字母的中线对齐,比如这样
测试图片
如果比文字(匿名)盒子高的盒子设置为middle,会让文字(匿名)盒子上浮,盒子的基线也会改变,可以理解为比文字(匿名)盒子高的盒子与line盒子中文字(匿名)小写x字母的中线对齐后,比文字(匿名)盒子高的盒子下沉,line盒子的高度也跟着下沉,比如这样
测试图片
middle的值只和文字(匿名)有关,我觉得和属性的名字不相符,也搞得很复杂,难道是我理解的问题?后面会说用middle和line-height居中对齐 - text-top
元素本身的基线与line盒子中文字(匿名)的顶端对齐,注意不是文字所在的匿名文字盒子的顶端 - text-bottom
元素本身的基线与line盒子中文字(匿名)的底端对齐,注意不是文字所在的匿名文字盒子的底端 - sub
元素本身的基线与line盒子中文字(匿名)的下标对齐 - super
元素本身的基线与line盒子中文字(匿名)的上标对齐 - 数值(支持负值)
元素本身基于line盒子基线的偏移 - 百分比
和数值一样,不过基于父元素的line-height计算,也就是line盒子中文字盒子(匿名)的line-height
line-height
line-height顾名思义,我觉得就是设置line盒子的最低高度,比如下图中,设置div的line-height为3rem就是设置div盒子中line盒子的最低高度为3rem,设置span的line-height为5rem就是设置span盒子中line盒子的最低高度为5rem
测试图片
<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:3rem;">
<span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;font-size:1rem;line-height:5rem;">我的line-height为5rem</span>
我是第一行我的line-height为5rem
<br/>
我是第二行我的line-height为3rem
</div>
div中有两个line盒子,第一个是由内部撑开的5rem,第二个是设置div的3rem
红框我把它称作行内间距,注意是行内间距,不是行间距,不是line盒子和line盒子之间的间距,我的理解是line盒子和line盒子之间是没有间距的,但是line盒子本事,有行内上间距和行内下间距,他们是相等的,都等于(line盒子的高度-font-size)/2,上面一共有六个行内间距,div盒子内两行的4个和span盒子中一行的2个
line-height常用的值有normal(初始值),数字(不是数值),数值(px,em...),百分比,inherit(默认值)
- inherit(默认值)
继承父元素的值 - normal(初始值)
这个值在不同的font-size和浏览器下有所不同,一般为1.2左右 - 数字(推荐使用)
1,1.1,1.2,1.3...这个值是自身font-size的倍数,比如设置为1,那么行内间距就会(line-height-font-size)/2=0,所以看起来文字之间就会没有间距 - 数值
设置固定的数值,如果设置为em,就会根据当前盒子font-size的大小计算出一个固定的值,后代会继承此值 - 百分比
还是设置固定的数值,根据当前font-size的大小计算,后代会继承此值
记录几种用line-height和vertical居中的方法
- 单行文字在blcok中居中
设置外部block的line-height和height相等,可以不设置height的值,设置了line-height,height会自动计算等于line-height - 多行文字在block中居中
同样设置外部block的line-height和height相等,将内部包含文字的block元素display:inline-block;line-height:normal;vertical-align:middle;如下图所示
测试图片
<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:8rem;">
<p style="line-height:normal;vertical-align:middle;display:inline-block">我是多行文字<br/>我真的是多行<br/>其实只有三行了</p>
</div>
其实上面的并不是真正的垂直居中,只是近似垂直居中,因为字母x的中间并不一定是line盒子的中间,会稍微偏下一点点,要真正的垂直居中,要将外部block盒子的font-size设为0,内部block盒子的font-size设置为正常值就是真正的垂直居中了
- 单个图片
和上面的一样,图片本身就是inline-block
网友评论