margin：auto与水平居中

最新推荐文章于 2024-03-22 10:15:53 发布

weixin_33671935

最新推荐文章于 2024-03-22 10:15:53 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/yatao/p/5844909.html

版权

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>

转载于:https://www.cnblogs.com/yatao/p/5844909.html

weixin_33671935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin：auto与水平居中

auto：自动填充当margin-right设置为100px，margin-left设置为auto那么margin-left的值为屏幕总的宽度减去100px左右均为auto，水平居中显示当margin-left与margin-right设置为auto则平分剩余空间，也就是橙色部分会位于中间部位<!DOCTYPE html>&...
复制链接

扫一扫