很久没写过页面了，现在写起来也觉得捡起来还是挺快的。
当时遇到了这样的问题，我有一个大的div包涵了整个网站，有网页头部，中部还有底部。头部就是一个标题，中部就是几张图片跟文字排版，结果左右两边的图片边距不一样，这根本就不是我一开始想要的排版，在几经修改下，如下。
1.把图片的那个div设为margin:0 50px;这样就是上下边距为0，左右边距各位50。样式如下：
body{margin:0;padding: 0px; width:1440px;height:500px;background-color: #F0F0F0;font:"微软雅黑";}#top{height:60px;line-height: 60px;text-align: center;margin-top: 20px;}#middle{height: 400px;margin:0px auto;}.left{height: 400px;float: left;text-align: left;margin:10px 50px;}#bottom{height: 40px;line-height:40px;clear: both;}2.底部的文字一直没有下去，而是贴着图片的文字，设了高度、行高 ，都没有效果，后来想到了清除前面的样式：clear:both;解决了问题。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>欢迎加入我们的团队</title><link charset="UTF-8" href="css/index.css" rel="stylesheet"></head><body><div id="total"><div id="top">ni<h2>欢迎加入我们的团队</h2></div><div id="middle"><div class="left" id="left1"><img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/><br>姓名：11<br>1233232<br>23232<br>34343<br></div><div class="left"><img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/><br>姓名：11<br>1233232<br>23232<br>34343<br></div><div class="left"><img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/><br>姓名：11<br>1233232<br>23232<br>34343<br></div><div class="left"><img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/><br>姓名：11<br>1233232<br>23232<br>34343<br></div></div><div id="bottom"><center><p>网页底部网页底部</p></center></div></div></body></html>
网页的最终效果图如下：
网页的居中显示，使用了margin、clear:both
原文地址：http://www.cnblogs.com/helloo/p/7954044.html