css中margin属性来控制什么（css基础快速入门-12）
大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**.div1里面内容居中,img也是.div1的内容,所以图片居中生效,但是这种写法,所有内容都居中**/ .div1 { text-align: center; } /**意思:.div里面img元素里面的内容居中,图片本身没有"内容" 所以这里无效**/ .div1 img { text-align: center; } /**上面的居中,是要找到父组件,设置内容居中**/ .div2 { } /**通过使用组件的外边距原理,不需要特意找父组件,实现子组件独立设置样式进行居中 使用外边距居中,首先吧组件显示方式改为块级元素:这个组件独占一行后,margin:auto,实现自动相对父组件进行外边距居中. **/ .div2 .img2 { display: block; margin: 20px auto; } .imgcenter { display: block; margin: 20px auto; } .div2 .ul1 { border: #f6e415 5px solid; display: block; margin: 20px auto; /**有文本就需要用text-align**/ text-align: center; list-style-type: none; } </style> </head> <body> <div class="div1"> <img src="http://img.studyofnet.compics/logocss.gif"> </div> <div style="width: 500px;border: aquamarine 5px solid;"> <img class="imgcenter" src="http://img.studyofnet.compics/logocss.gif"> </div> <div class="div2"> <img class="img2" src="http://img.studyofnet.compics/logocss.gif"> </div> <div class="div2"> <ul class="ul1"> <li>a</li> <li>b</li> <li>c</li> </ul> </div> </body> </html>
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
