vertical-align 各个属性值的含义
注意:vertical-align 属性不继承
vertical-align: baseline
vertical-align: baseline
强制元素的基线与父元素的基线对齐。(多数浏览器的默认值)
vertical-align: super
vertical-align: super
使元素基线高于父元素基线,但是高多少规范中没有要求,由用户代理(浏览器)自己决定,不同浏览器可能不同。
<style>
span {
vertical-align: super;
}
</style>
<body>
<span>span1
<span>span2</span>
span1
</span>
</body>
红线表示此元素的基线。默认情况下同一行的不同元素的基线是在同一条水平线上的。
vertical-align: sub
vertical-align: sub
使元素的基线低于父元素的基线,与 super 一样,低多少由用户代理决定,不同浏览器可能不同。
<style>
span {
vertical-align: sub;
}
</style>
<body>
<span>span1
<span>span2</span>
span1
</span>
</body>
红线表示元素基线:
vertical-align: bottom / text-bottom
vertical-align: bottom
将元素所在行内框的底边与行框的底边对齐。这个属性值 bottom 要和 text-bottom 区分开来。
vertical-align: text-bottom
将元素行内框的底边与文本的底边对齐。
一行中所有元素中最高的行内框即为行框的顶端,最低行内框为行框的底端,因此 bottom 的下沉程度是一定大于或等于 text-bottom 的下沉程度的。
<body>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: bottom;">图像<span style="font-size: larger;">span</span></p>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-bottom;">图像</p>
</body>
font-size 属性可以直接影响到元素自己的行内框,font-size 越大,元素自己的行内框越大。并且第一行的 span 标签也可以影响到第一行的行框。因此,第一行的 行框 是一定大于 第二行的行框的,所以第一行图片的下降程度要比第二行大一些。
红线表示对应元素的 text-bottom,紫色表示图片的底边。
如果把 第一行的 span 标签删除,两行没什么区别了。
<body>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: bottom;">图像</p>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-bottom;">图像<span>span</span></p>
</body>
vertical-align: top / text-top
vertical-align: top
与 bottm 相反。将元素所在行内框的顶边与行框的顶边对齐。
vertical-align: text-top
与 text-bottom 相反。将元素行内框的顶边与文本的顶边对齐。
第一个例子:第一行的 行框 与第二行的 p 标签行内框高度一致,所以两个图像的上升程度没有区别。
<body>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: top;">图像</p>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-top;">图像<span>span</span></p>
</body>
第二个例子中,第一行的 span 标签设置了 font-size: 30px ,因此使第一行的 行框 高度增加,所以第一行图片的上升程度一定大于第二行。
<body>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: top;">图像<span style="font-size: 30px;">span</span></p>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-top;">图像</p>
</body>
总之,对齐后的元素的具体位置取决于行中有什么元素、元素有多高,以及父元素的字号。
vertical-align: middle
vertical-align: middle
(通常用在图像上)注意作用与字面意思不太一样。作用为:把 行内元素方框的中线 以 父元素的基线 为基准,向上平移 0.5ex,即 父元素 font-size 值得一半。但是,这并不是规范定义的距离,所以在不同浏览器上向上偏移的量可能不同。
<body>
<p>这是一幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: middle;">图像</p>
</body>
红线为文字 text-bottom,蓝线为图像中线,两者之间的距离即为 0.5 ex。
百分数
当把 vertical-align 设置为 百分数时,计算方法为:此元素的 line-height 值 × 百分数
。百分数为 正,表示根据父元素的基线,元素的基线向上平移 此元素的 line-height 值 × 百分数
;若百分数为 负,表示根据父元素的基线,元素的基线向下平移 此元素的 line-height 值 × 百分数
。
<div style="font-size: 14px; line-height: 18px;">I felt that, if nothing else, I deserved a
<span style="vertical-align: 50%;">raise</span> for my efforts.
</div>
span 的基线以 div 的基线为基准,向上平移了 9 px。
长度值
vertical-align: n px
表示将元素从原来的位置向上平移或向下平移 n px 个位移。注意,这个属性值的设置不会导致发生相邻行之间的文本重叠现象,但是可能会改变 此行的 行框顶端位置或底端位置。
当 n 为正数时,上升:
<div style="width: 200px;">
I felt that, if nothing else, I deserved a
<up style="vertical-align: 10px;">raise</up> for my efforts.
</div>
当 n 为负数时,下降:
<div style="width: 200px;">
I felt that, if nothing else, I deserved a
<up style="vertical-align: -10px;">down</up> for my efforts.
</div>
<div style="width: 200px;">
I felt that, if nothing else, I deserved a
<up style="vertical-align: -10px;">down</up> for my efforts.
</div>
参考:《CSS权威指南》第四版