归元

div 里面图片水平垂直居中

好像里面用的是层,不好意思,本人到现在都不知道层与DIV的关系。
下面就是图片水平垂直居中
<style>
body{height:100%;margin:0px;}
#outer{
position:relative;
height:100%;
background-color:red;
border:2px solid block;
width: 100%;
}
#middle{position:absolute;top:50%;left:50%;}
#middle img{position:relative;top:-50%;left:-50%; }
</style>
<div id="outer">
<div id="middle"> <img src="logobaidu.gif" width="174" height="59" /> </div>
</div>

如果只是垂直居中的话可以看一下下面的代码
<style>
body{height:100%;margin:0px;}
#outer{
position:relative;
height:100%;
background-color:red;
border:2px solid block;
}
#middle{position:absolute;top:50%;}
#middle img{position:relative;top:-50%;}
</style>
<div id="outer">
<div id="middle"> <img src="logobaidu.gif" width="174" height="59" /> </div>
</div>

只是水平居中相信聪明的你一定可以搞定了

评论

© 归元 | Powered by LOFTER