问答详情
源自：15-1 水平居中设置-行内元素

我用margin做的感觉效果是一样的，这是巧合？还是哪里有问题？

<style>
div{
    border:1px solid red;
    margin:20px auto;
}
</style>
</head>

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<!--下面是任务部分-->

<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>

提问者：qq_云淡风轻_48 2016-08-04 09:14

个回答

  • Yinsion_Nie
    2016-09-09 00:00:19
    已采纳

    这个只是凑巧，因为你没有给div设置宽高，所以div的宽高由其内部子元素来确定（在这里就是图片的宽高），因此给div设置margin:20px auto;看起来这个效果是应用于图片的，其实是作用在div上面。

    不信，你试试给div加上大于图片的宽度和高度，这时图片会在div的左上角对齐。

    2
  • 慕容烈
    2016-08-16 16:03:35

    我认为，当我们能够用简便的方法来是想我们想要的目标的时候，就不用复杂的方式来实现。我们在使用网页的时候讲究的是速度，是设计的讲究的是优化。

    0
  • 罖汩伣
    2016-08-09 11:04:07

    用margin:20px auto; 只是让盒子上下外边距为20px，左右自动居中！ 但是盒子里面的内容是不会跟着居中的

    0
  • qq_何必忙著為自己解釋_03169832
    2016-08-06 14:25:05

    margin:20px auto; 中的auto有自动居中的效果，可以理解为auto会根据浏览器的宽度自动的设置两边的外边距，原理就是：（在当前浏览器分辨率下浏览器的宽度-外包含层的宽度）/2=外边距。

    其限制条件是：不能在设置了margin:20px auto;再另外设置浮动（float）、绝对定位（absolute、fixed）

    而text-align:center;就不会存在这样的限制条件

    仅供参考

    0
  • 汪汪3681310
    2016-08-06 10:06:58

    默认的

    0
  • 杨铁打
    2016-08-04 10:02:30

    padding,border和margin的书写方式是一样

    0
  • shyashya
    2016-08-04 09:59:35

    div设置了margin后为居中，里面的内容自然就居中了

    0