首页 > 代码库 > 设置图片居中的方法

设置图片居中的方法

1.设置图片居中(一图居中)

HTML代码

<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /></div>

CSS代码

.box {/*非IE的主流浏览器识别的垂直居中的方法*/display: table-cell;vertical-align:middle;/*设置水平居中*/text-align:center;/* 针对IE的Hack */*display: block;*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/width:200px;height:200px;border: 1px solid #eee;}.box img {/*设置图片垂直居中*/vertical-align:middle;}

2.设置图片居中(多图居中)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div水平垂直居中</title>    <style>        *{            margin:0;            padding:0;        }        div.container{            background-color:pink;            border:2px solid #000;            width:700px;            height:500px;            margin:0 auto;            margin-top:50px;        }        div.wrapper{            text-align:center;            margin-top:28px;        }        div.wrapper img{            border:1px solid #ddd;            width:200px;            margin:10px;        }      </style></head><body>    <div class="container">            <div class="wrapper">                <img src="girl3.jpg" alt="a"/>                  <img src="girl3.jpg" alt="a"/>                <img src="girl3.jpg" alt="a"/>                <img src="girl3.jpg" alt="a"/>                <img src="girl3.jpg" alt="a"/>                <img src="girl3.jpg" alt="a"/>            </div>    </div>   </body></html>

 

设置图片居中的方法