深入理解vertical-align

前言

了解vertical-align

• vertical-align 属性设置元素的垂直对齐方式，
  middle:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

  必须是行内元素，可以想象，如果是块级元素，它默认会占据一行，没有 元素对齐一说。

• 图中，最外层是一个div,左边和右边是都是设置的display是inline-block，默认显示是这样。
  

分析

• 默认情况下，vertical-align默认值是baseline,实例翻译一下，图片的基线在最下面，文字和这一行的基线对齐，所以默认两元素底部是对齐的。

• 当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
  

  • 实例 当图片css上添加了vertical-align:middle之后，相应的基线提高了，所以文字显示位置到图片接近中间了，当在文字上面同样设置middle后，两元素就如下面图所示，垂直对齐了，这里不再演示。
    

• 如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

  

参考文章

http://blog.csdn.net/yangjvn/article/details/47706721
http://sojuker.blog.163.com/blog/static/1387908792012760243916/
http://www.jb51.net/css/29328.html