margin：auto与水平居中

auto：自动填充
当margin-right设置为100px，margin-left设置为auto
那么margin-left的值为屏幕总的宽度减去100px
 

 

左右均为auto，水平居中显示
当margin-left与margin-right设置为auto
则平分剩余空间，也就是橙色部分会位于中间部位

 

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
#auto{
      background: lightcoral;
      width: 500px;
      margin-right: 100px;
      margin-left: auto;
}
            </style>
      </head>
      <body>
<div id="auto">
      margin-right:100px,margin-left:auto,自动填充
</div>
      </body>
</html>
对于图片的margin：0 auto；此时图片属于inline水平，并没有撑满整个容器，不存在剩余空间
因为它没有剩余的填充，所以设置auto，并没有任何变化 

 

为了使图片居中显示可以给图片img添加display：block；属性，使图片占据一行，从而有剩余的填充空间
 

 

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                  img{
                        width: 200px;
                        margin: 0 auto;
                        }
            </style>
      </head>
      <body>
<div id="auto">
      <img src="img/logo.jpg"/>
</div>
      </body>
</html>

 

posted @ 2016-09-06 10:57  桃园  阅读(767)  评论(0)  编辑  收藏  举报