为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

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

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

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

正在回答

7 回答

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

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

2 回复 有任何疑惑可以回复我~
#1

Yinsion_Nie

新手别看上面这段文字啊,我没看题主的代码就乱写一通,我自己也学艺不精,大家别看啊......我怕误人子弟。 题主的原因是没有点开全屏... 为什么删不掉... 污点!
2016-09-09 回复 有任何疑惑可以回复我~
#2

慕粉3917843 回复 Yinsion_Nie

这就很尴尬了
2016-09-28 回复 有任何疑惑可以回复我~
#3

Yinsion_Nie 回复 慕粉3917843

>_<||
2016-09-28 回复 有任何疑惑可以回复我~
#4

qq_云淡风轻_48 提问者

非常感谢!
2016-11-08 回复 有任何疑惑可以回复我~
查看1条回复

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

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

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

仅供参考

0 回复 有任何疑惑可以回复我~

默认的

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信