vertical-align各个属性值的含义
vertical-align 各个属性值的含义
注意：vertical-align 属性不继承
vertical-align: baline
vertical-align: baline 强制元素的基线与⽗元素的基线对齐。（多数浏览器的默认值）
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="" >图像<span >span</span> </p>
<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像</p>
</body>
font-size 属性可以直接影响到元素⾃⼰的⾏内框，font-size 越⼤，元素⾃⼰的⾏内框越⼤。并且第⼀⾏的 span 标签也可以影响到第⼀⾏的⾏框。因此，第⼀⾏的 ⾏框 是⼀定⼤于 第⼆⾏的⾏框的，所以第⼀⾏图⽚的下降程度要⽐第⼆⾏⼤⼀些。
雨过山村古诗
红线表⽰对应元素的 text-bottom，紫⾊表⽰图⽚的底边。
如果把 第⼀⾏的 span 标签删除，两⾏没什么区别了。
<body>
<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像</p>
<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像<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="" >图像</p>
<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像<span>span</span></p>
</body>
第⼆个例⼦中，第⼀⾏的 span 标签设置了 font-size: 30px ，因此使第⼀⾏的 ⾏框 ⾼度增加，所以第⼀⾏图⽚的上升程度⼀定⼤于第⼆⾏。
<body>
中央新影<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像<span >span</span></p> <p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像</p>
</body>
总之，对齐后的元素的具体位置取决于⾏中有什么元素、元素有多⾼，以及⽗元素的字号。
vertical-align: middle
vertical-align: middle （通常⽤在图像上）注意作⽤与字⾯意思不太⼀样。作⽤为：把 ⾏内元素⽅框的中线 以 ⽗元素的基线 为基准，向上平移 0.5ex，即 ⽗元素 font-size 值得⼀半。但是，这并不是规
范定义的距离，所以在不同浏览器上向上偏移的量可能不同。
<body>
<p>这是⼀幅<img src="images/@SYV]MDOW@RIC8`)IJVB($I.jpg"alt="" >图像</p>
</body>
汇川区人民政府网
红线为⽂字 text-bottom，蓝线为图像中线，两者之间的距离即为 0.5 ex。
百分数
当把 vertical-align 设置为 百分数时，计算⽅法为：此元素的 line-height 值 × 百分数。百分数为 正，表⽰根据⽗元素的基线，元素的基线向上平移 此元素的 line-height 值 × 百分数；若百分数为 负，表⽰根据⽗元素的基线，元素的基线向下平移 此元素的 line-height 值 × 百分数。
<div >I felt that, if nothing el, I derved a
<span >rai</span> for my efforts.
</div>
span 的基线以 div 的基线为基准，向上平移了 9 px。
长度值
vertical-align: n px 表⽰将元素从原来的位置向上平移或向下平移 n px 个位移。注意，这个属性值的设置不会导致发⽣相邻⾏之间的⽂本重叠现象，但是可能会改变 此⾏的 ⾏框顶端位置或底端位置。
当 n 为正数时，上升：
<div >
I felt that, if nothing el, I derved a
<up >rai</up> for my efforts.
</div>
当 n 为负数时，下降：
记忆移植<div >
I felt that, if nothing el, I derved a
<up >down</up> for my efforts.
</div>
<div >
I felt that, if nothing el, I derved a
<up >down</up> for my efforts.
</div>
参考：《CSS权威指南》第四版
