初解vertical-align

vertical-align 垂直文本

vertical-align什么时候会生效

当父级设置了行高（line-height）；

子集为inline属性或者inline-block属性时生效；

vertical-align的属性

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

个个属性对应的位置

 

 

这张图是来自博客园但是我觉得他做的不好。我改的。

 

基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
中线位于基线的上方，与基线的距离为小写字母x高度的一半（即0.5ex），而ex同font-size相关，大部分浏览器认为1ex = 0.5em（em同样也是相对单位，不是绝对单位），因此会将基线以上四分之一em处作为中线来对齐

*如果垂直对齐的元素没有基线，那么该元素底端与父元素基线对齐。

结合上面的属性和我的图片看一下如何对齐方式

我还做了一个dome可以看一下.

demo

vertical-align常见的问题

如果vertical-align使用带单位的数值和%

 

数值可以使用，但是根据测试除了0以外都不生效，0就是子元素对齐父元素的基线等同于baseline；

单位的数值，可以生效。如果打30px会使子元素的基线对齐父元素的基线位置上升30px的高度；

使用的时候，vertical-align的百分比是根据父级的line-height计算的，正的则上升。负的则下降

要注意是在基线的基础上。也就是baseline的基础上

比如子元素设置vertical-align：30%；而父级的line-height：100px；那么子元素的基线就和原来相比上升30px的高度。

 

图片和文字怎么设置父元素垂直居中对齐

 

我做了demo，发现如果图片超过或等于父元素的height的话，会导致父元素被撑大。有因为图片默认是vertical-align：baseline，然后如果图片大于等于父元素的话，就会导致父级下面产生一个幽灵节点，因为图片的下沿对齐父元素的基线，然后基线和bottom之间有间距，会导致父元素被撑开。给最大的图片设置middle。