css样式之vertical-align垂直居中的应用

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>

图片居中