qq_云淡风轻_48
2016-08-04 09:14
<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>
这个只是凑巧,因为你没有给div设置宽高,所以div的宽高由其内部子元素来确定(在这里就是图片的宽高),因此给div设置margin:20px auto;看起来这个效果是应用于图片的,其实是作用在div上面。
不信,你试试给div加上大于图片的宽度和高度,这时图片会在div的左上角对齐。
我认为,当我们能够用简便的方法来是想我们想要的目标的时候,就不用复杂的方式来实现。我们在使用网页的时候讲究的是速度,是设计的讲究的是优化。
用margin:20px auto; 只是让盒子上下外边距为20px,左右自动居中! 但是盒子里面的内容是不会跟着居中的
margin:20px auto; 中的auto有自动居中的效果,可以理解为auto会根据浏览器的宽度自动的设置两边的外边距,原理就是:(在当前浏览器分辨率下浏览器的宽度-外包含层的宽度)/2=外边距。
其限制条件是:不能在设置了margin:20px auto;再另外设置浮动(float)、绝对定位(absolute、fixed)
而text-align:center;就不会存在这样的限制条件
仅供参考
默认的
padding,border和margin的书写方式是一样
div设置了margin后为居中,里面的内容自然就居中了
初识HTML(5)+CSS(3)-升级版
1225297 学习 · 18230 问题
相似问题