css基础快速入门 从图片居中两种方法理解margin
大学生就可以看懂的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="pics/logocss.gif">
</div>
<div style="width: 500px;border: aquamarine 5px solid;">
<img class="imgcenter" src="pics/logocss.gif">
</div>
<div class="div2">
<img class="img2" src="pics/logocss.gif">
</div>
<div class="div2">
<ul class="ul1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
</html>