圖片垂直居中

xiachufeng_ 2010-12-22 11:43:39

div中的图片在ie7，ie8 ff,google都是垂直居中的,就是ie6不行,怎么兼容ie6？？
<div style="display:table-cell;vertical-align:middle;text-align:center;width:200px;height:200px;line-height:200px;border: 1px solid green;">
<img src="images/c7.jpg" />
</div>

...全文

77 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

86y 2010-12-22

打赏
举报

你自己去看吧！http://ok22.org/art_detail.aspx?id=73

dalmeeme 2010-12-22

打赏
举报

或者纯css，参考示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

#div1 {

    width:300px;

    height:400px;

    border:1px solid red;

}

#div1 img {

    margin:150px auto;    //水平居中、垂直居中

    width:100px;

    height:100px;

    display:block;

}

</style>

</head>

<body>

<div id="div1">

    <img src="2.jpg" />

</div>

</body>

</html>

关键是算出图片的上下margin：(父容器的height-图片的height)/2

dalmeeme 2010-12-22

打赏
举报

给你个js实现的，全兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

#picbox{width:200px;height:200px;background:#ccc;}

#picbox img{width:100px;height:100px;}

</style>

<script>

function setCenter(Xelement)

{

    var parent=Xelement.parentNode;

    parent.style.position="relative";

    Xelement.style.position="absolute";

    var left=(parent.clientWidth-Xelement.clientWidth)/2;

    var top=(parent.clientHeight-Xelement.clientHeight)/2;

    Xelement.style.left=left+"px";

    Xelement.style.top=top+"px";

}

</script>

</head>

<body>

<div id="picbox">

  <img id="img1" src="2.jpg" alt="" onload="setCenter(this)"/>

</div>

</body>

</html>