1.利用vertical-align:middle; 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block;图片样式设置vertical-align:middle;
添加的span标签要给高度100%; display:inline-block;
HTML
<div> <span></span> <img src="images/list3_1.jpg"> </div>
css
<style type="text/css"> div { 400px; height: 300px; display: table-cell; /*水平居中*/ text-align: center; } div span{ display: inline-block; height: 100%; vertical-align: middle; } div img { vertical-align:middle; } </style>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> div { 400px; height: 300px; display: table-cell; /*水平居中*/ text-align: center; } div span{ display: inline-block; height: 100%; vertical-align: middle; } div img { vertical-align:middle; } </style> <div> <span></span> <img src="images/list3_1.jpg"> </div> </body> </html>
2.上面的结构 会多个多余的标签
HTML
<div> <a href=""> <img src=""> </a> </div>
CSS
div { 221px; height:70px } div a{ display:inline-block; 221px; height:70px; line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/ text-align:center; /*水平居中*/ } div a img{ vertical-align"middle; }
兼容 IE7+以上可以