vertical-align及使其图片垂直居中

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

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

vertical-align属性可被用于两种环境：

• 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片img;
• 
• 垂直对齐表格单元内容:

最常见的应用：图片垂直居中

vertical-align：使图片垂直居中，要有参照。

方法：在容器中加一个行内框比它高的元素，使对齐方式根据行内框对齐。

<div class="test">
			<img src="img/xfz.png" alt="" />
		</div>

.test{
				width:400px;
				height: 400px;
				border:1px solid ;
				margin:0 auto;
				text-align: center;
			}
			.test:after{/*添加参照*/
				content:"";
				display:inline-block;
				width:5px;
				height:100%;
				background:red;
				vertical-align: middle;
			}
			.test img{
				vertical-align: middle;
			}