所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image)形式展示,是以<img>元素形式展示的。
在img的同级元素添加一个空白的span标签,将span行内元素设置为行内块元素,也就是将其display设置为“inline-block”,将其宽度定位1px,height为容器的100%,这样高度可以和容器的高度达到一样,然后通过“vertical-align:middle”设置垂直对齐,从而实现所需要的效果。
代码如下
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{ width:500px; height:500px; border:1px solid #000; text-align:center; } span{ height:100%; width:1px; vertical-align:middle; display:inline-block; } img{ vertical-align:middle; } </style> </head> <body> <div class="wrap"> <img src="images/con3.png" alt="" /><span></span> </div> </body> </html>
兼容IE6/7/8等