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>