1：vertical-align家族基本认识
了解vertical-align支持的属性值以及组成
属性：
1.inherit
2.线类
baseline,top,middle,bottom
3.文本类
text-top,text-bottom
4.上标下标类
sub,super
5数值百分比类
20px,2em,20%
共性 都带数值 20px 20em 20%，都支持负值 margin,letter-spacing word-spacing vertical-align，行为表现一致 在baseline对齐基础上上下偏移对应数值大小
百分比类的差异
vertical-align的百分比值是相对于line-height计算的。
2 vertical-align起作用的前提
探讨各种display值对vertical-align的影响
vertical-align起作用是有条件的，应用于inline水平以及table-cell元素
inline水平的元素
img span strong em
inline-block input
table-cell元素
.table-cell:<td>
默认状态下：图片，按钮，文字，和单元格
1.display：更改元素的显示水平
2.css声明更改元素的显示水平
在一个P标签中的img标签 设置了vertical-align:middle 图片不居中
不是vertical-align没起作用，而是太短，不够居中
实战：多行文字与图片垂直居中
<div class="test-list">
<span>文字</span>
<img src="test.jpg"/>
</div>
.test-list {text-align:justify}
.test-list > span{ display:inline-block; width:210px; vertical-align:middle }
.test-list > img{vertical-align:middle;}
3 vertical-align 与 ling-height
vertical-align百分比是相对于line-height值计算的
{
line-height:30px;
vertical-align:-10%;
}相当于vertical-align=-3px
内联图片里面下边出现了空白，解决方法去掉行高，或者改变vertical-align属性bottom,top,middle都可以
基本现象衍生：垂直居中
vertical-align:middle;line-height:36px;
设置标签应用比图片大的行高，图片就近似垂直居中了。
4 vertical-align线类属性值深入理解
底线，顶线，中线的行为表现
vertical-align:bottom
1.inline/inline-block元素：元素底部和整行的底部对齐
2.table-cell元素：单元格底padding边缘和表格行底部对齐
vertical-align:top
vertical-middle
1.inline/inline-block元素：元素的垂直中心点和父元素基线上1/2 x-height处对齐
2.table-cell元素：单元格填充盒子相对于外面的表格行居中对齐。
近似垂直居中
完全垂直居中：设置font-size:0
5 深入理解vertical-align文本类属性值
vertical-align:text-top/text-bottom
定义
1.vertical-algin:text-top
盒子的顶部和父级centent-area的顶部对齐
2.vertical-align:text-bottom
盒子的底部和父级content area的底部对齐
1.元素vertical-align垂直对齐的位置与前后的元素都没有关系；
2.元素vertical-align垂直对齐的位置与行高line-height没有关系，至于字体大小与font-size有关
实际作用
表情图片与文字的对齐效果 图片（16x16）
使用基线的问题在于图标偏上
使用顶线/底线的问题在于受其他内联元素影响，造成巨大定位偏差
使用中线也是不错的选择，单需要恰好的字体大小以及兼容性要求不高
使用文本底部较合适不受行高以及其他内联元素影响；
6 vertical-align上标下标类
1.html中的上标 <sup>
2.html中的下标 <sub>
变小的是原来字体的75%大小
1.<sup> -->vertical-align:super
2.<sub> -->vertical-align:sub
定义
1.vertical-align:super
提高盒子的基线到父级合适的上标基线位置。
2.vertical-align:sub
降低盒子的基线到父级合适的下标基线位置。
实际应用
7：vertical-align前后不一的作用机制
相邻元素不同vertical-align的行为表现
当出现前后不一致的时候
关注当前元素和父级，
前后并没有直接影响
8 vertical-align糟糕的兼容性
IE6/7
firefox/chrome
原文链接：https://www.qiquanji.com/post/7666.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知