所謂的圖片水平垂直居中就是把圖片放在一個容器元素中(容器大於圖片尺寸或是指定了大小的容器),並且圖片位居此容器正中間(中間是指元素容器的正中間),而圖片不是以背景圖片(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等