图片快速居中在div中

来源：互联网发布：2016年淘宝类目销售额编辑：程序博客网时间：2024/05/16 14:08

兼容IE6.IE7.IE8的图片在div中快速水平垂直居中(包括固定div的宽高和不定宽高两种情况)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.outside_box{width: 300px;height: 300px;border: 1px solid #000;position: relative;}
.inside_box{width: 100%;height: 100%;} /*button设置宽高跟div一样*/

/*方法1:*/
.inside_image{
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
}
/*方法2*/
.inside_image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 150px;
height: 150px;
margin: auto;
}
</style>
</head>
<body>

<div class="outside_box">

<img class="inside_image" src="images/6.png"/>

</div>

<hr />

<div class="outside_box">
<button class="inside_box">
<img class="inside_image" src="images/6.png"/>
</button>
</div>
<hr />

<div>
<button style="height: 100%; width: 100%;">
<img src="images/6.png"/>
</button>
</div>
</body>
</html>

阅读全文

0 0