【CSS】vertical-align属性

很多程序员敲代码写样式时，是否会遇到以下情况？

• 一行5个元素，然后要求一上一下排列；
• 一行10个元素，要求前7个元素垂直居中，第八，第九个元素分别一上一下，第十个元素垂直居中；
• 一张图片，一段文字，另一段文字，图片和第一段文字要垂直居中。

诸如此类...

总之一句话，就是极其不规律，我们如果用弹性盒去处理这些元素，得到的结果是全部垂直居中，或者全部换行。特异性的针对某一个，某几个元素设置样式，我们也可以通过定位，或者设置外边距，内边距实现。但是如果有大量元素呢？那肯定是有局限性的

今天，我们研究一个新属性，很少见，但是有时候，却可以解决大问题。

那就是 vertical-align属性，vertical-align属性用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

以下是这个属性的属性值

vertical-align: baseline;        //使元素的基线与父元素的基线对齐。
vertical-align: sub;             //使元素的基线与父元素的下标基线对齐。
vertical-align: super;           //使元素的基线与父元素的上标基线对齐。
vertical-align: text-top;        //使元素的顶部与父元素的字体顶部对齐。
vertical-align: text-bottom;     //使元素的底部与父元素的字体底部对齐。
vertical-align: middle;          //使元素的中部与父元素的基线加上父元素高的一半对齐。
vertical-align: top;             //使元素的基线对齐到父元素的基线之上的给定长度，可以是负数。
vertical-align: bottom;          //使元素的基线对齐到父元素的基线之上的给定百分比。

我个人习惯于用div，钟爱div，可以说用习惯了，用顺手了。那么只需要将div转化为行内元素，即可使用这个属性。

就拿以下代码为例我们进行说明：

	
		
		
		
	
	
		

			
			我是猿猴
			我是程序员
			
baseline model
			
加菲猫
		
	

 运行效果如下：

我们会发现，文字是按照基线排列的，这是默认样式。但如果我们给“我是程序员”这个元素加上vertical-align: middle;表示使元素的中部与父元素的基线加上父元素高的一半对齐。效果如下：

 我们发现了这个内容为“我是程序员”的span标签，的确是依照父元素基线下降了原来的一半。那么如果我们给图片同样设置这个属性，会有何变化？

 除了刚刚我们设置过的，内容为“我是程序员”的span标签之外，所有元素都实现了垂直居中。

其他的属性值更是有不同的效果，也可以实现一上一下的排列。        

自己尝试，多琢磨几遍，就能掌握了。

细想一下，这个属性在平时一般用不到，但是有时候解决某些问题，确实会有妙用。