css样式之vertical-align垂直居中的应用：将图片垂直左右居中
元素垂直居中
1：必须给容器父元素加上text-align：center
2:必须给当前元素转换成行内块元素，display：inline-block，再给当前元素加上vertical-align:middle;
3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;0;height:100%;display:inline-block;等设置；
垂直对齐方式：vertical-align:top/bottom/middle;
应用于不同图片在div当中垂直居中
代码实例如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0 auto;padding:0;} a{text-decoration:none;} .box{width:600px;height:500px;border:1px solid #C06;} .box dl{width:198px;height:230px;border:1px solid red;float:left;} .box dt{width:198px;height:180px;text-align:center;}/*要给a元素的父容器加上text-align：center*/ .box dt a{vertical-align:middle;display:inline-block;} .box dt span{vertical-align:middle;width:0px;height:100%;display:inline-block;}/*a标签的同级元素*/ </style> </head> <body> <div class="box"> <dl> <dt><a href="#"><img src="images/mz1.jpg"/></a><span></span></dt> <dd>麻花帽</dd> <dd>市场价：99现价：19元</dd> </dl> <dl> <dt><a href="#"><img src="images/mz2.jpg"/></a><span></span></dt> <dd>麻花帽</dd> <dd>市场价：99现价：19元</dd> </dl> <dl> <dt><a href="#"><img src="images/mz3.jpg"/></a><span></span></dt> <dd>麻花帽</dd> <dd>市场价：99现价：19元</dd> </dl> </div> </body> </html>