不改变图片大小,使图片居中的办法

一、运用背景图像

<style>
#tt {
    height: 400px;
    border: 1px solid #e6e6e6;
    background-image: url(../images/anquan/2.png);
    background-position: center top;
    margin-top: 15px;
}
</style>
<div id="tt"> </div>

 

二、运用calc():自动计算屏幕大小

<style>
#tt {
  background-color:#FF0000;
  width: 100%;
  height:500px;
  overflow: hidden;
}
#tt .img
{
  width:1920px;
  margin:0 calc(50% - 960px);
}
</style>
 
<div id="tt"><img src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/></div>

效果前后如图

     

posted @ 2015-12-16 10:23  镜子-正衣冠-知得失  阅读(427)  评论(0编辑  收藏  举报