vertical-align的浅谈

参考文章：http://www.zhangxinxu.com/wordpress/?p=813

只从开始用display：inline-block之后，vertical-align一直是一个让我头痛的问题，因为有时候它行得通，有时候又行不通，虽然一直尝试，也没得出一个结论。

查阅了一些资料，加上这篇文章，有了点认识。

首先，我知道vertical-align属性是：

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

然后，vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象！

这是文章中的一句话，并且在文章中有论证，而我想在这里写的是我之前的发现，

1、首先，总是会有一个元素以vertical-align:top存在的，起码形式上是，就算给它明确定义了vertical-align：middle 它也首先会表现为vertical-align:top,因为两者并不冲突。top是相对于父元素而言的，middle则是相对它的兄弟元素所造成的基线而言的。这个元素一般是height最大的元素，（由它撑起一片天），如果有两个一样height的元素，那么未定义的那个撑起天，若都定义了，相对于基线离得最高最远的那个为改元素

2、父元素的基线是由大部分文字元素的基线决定的。

3、再撑起一片天的那个元素的庇护下，其他的元素才进行上下移动：

当图片为baseline的时候，文字为baseline的时候，图片底部会相对于文字的baseline对齐

当图片为Middle，文字为baseline的时候，图片的中点，会相对于文字小写x的中点（这一点文章那里说错了）对齐

当图片为baseline，文字为Middle的时候，图片事实上还是相对于文字baseline对齐的，也就是如文章所说的，vertical-aglin事实上是相对于父元素的，因此图片为baseline的时候，它的底部就应该相对于父元素的baseline对齐，也就是文字的baseline。

前面所说的事实上有点偏差，因为单文字为Middle的时候，文字事实上会下移，或者是图片上移，也就是说图片的底部不再对准文字的baseline了，而是baselien上面的一点，具体这点值多少，还没验证出来。

根据文章所说的，其实可以用vertical-aling:像素值来纠正一点误差，达到你想要的理想效果。

以上是一点浅谈，望批评指正。

关于vertical-align的一些具体的属性值，可以点这里