前言
了解vertical-align
vertical-align 属性设置元素的垂直对齐方式,
middle:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。必须是行内元素,可以想象,如果是块级元素,它默认会占据一行,没有 元素对齐一说。
图中,最外层是一个div,左边和右边是都是设置的display是inline-block,默认显示是这样。
分析
默认情况下,vertical-align默认值是baseline,实例翻译一下,图片的基线在最下面,文字和这一行的基线对齐,所以默认两元素底部是对齐的。
当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:
- 实例 当图片css上添加了vertical-align:middle之后,相应的基线提高了,所以文字显示位置到图片接近中间了,当在文字上面同样设置middle后,两元素就如下面图所示,垂直对齐了,这里不再演示。
- 实例 当图片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