css深入理解vertical-align的详细介绍

第一讲：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计算的。

第二讲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没起作用，而是太短，不够居中

实战：多行文字与图片垂直居中

<p class="test-list">

<span>文字</span>

<img src="test.jpg"/>

</p>

.test-list {text-align:justify}

.test-list > span{ display:inline-block; width:210px; vertical-align:middle }

.test-list > img{vertical-align:middle;}

第三讲 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;

设置标签应用比图片大的行高，图片就近似垂直居中了。

第四回 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

第五回 深入理解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）

使用基线的问题在于图标偏上

使用顶线/底线的问题在于受其他内联元素影响，造成巨大定位偏差

使用中线也是不错的选择，单需要恰好的字体大小以及兼容性要求不高

使用文本底部较合适不受行高以及其他内联元素影响；

第六回 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

降低盒子的基线到父级合适的下标基线位置。

实际应用

第七回：vertical-align前后不一的作用机制

相邻元素不同vertical-align的行为表现

当出现前后不一致的时候

关注当前元素和父级，

前后并没有直接影响

第八回 vertical-align糟糕的兼容性

IE6/7

firefox/chrome

以上就是css深入理解vertical-align的详细介绍的详细内容，更多请关注其它相关文章！