老师帮我看看 about区图片为啥不能居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/项目.css">
</head>
<body>
<!-- 顶部区 -->
<div class="dingbu">
<div><img src="images/logo.png">
</div>
<div class="menu"><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul></div>
</div>
<!-- banner 区 -->
<div class="banner">
<div class="img-banner"><img src="images/banner3.jpg">
    </div>
       <div class="form">
        <form>
     <!-- placeholder默认提示 -->
     <input type="text" name="" class="text1" placeholder="your Name" ><br>
     <input type="text" name="" class="text1" placeholder="your Phone"><br>
     <input type="text" name="" class="text1" placeholder="your Email"><br>
            </form>
            <!-- 多行文本框 高度rows 宽度cols -->
     <textarea rows="10" cols="55"  class="text2" placeholder="Write Your Comment Here"></textarea><br>
     <!-- 提交按钮 -->
     <input type="submit" name="" class="text3" value="SEND MESSAGE" >
       </div>
</div>

<div class="ABOUT">
<div class="biaoti">
    <h2 class="h1">ABOUT</h2><br>

<div class="border"></div>
<div class="P1">
<p class="pp1">Lorem Ipsum is simply dummy text of the printing and typesetting<br>
industry.Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s.</p>
</div></div>
<div class="img-pp3"><img src="images/bb3.jpg"></div>



</div>

<div class="GALLERY"></div>
<div class="yejiao"></div>

</body>
</html>

*{
	margin: 0px;
	padding: 0px;
	font-family:"Microsoft YaHei UI";
}
/* 顶部区 */
.dingbu {
	background-color: #07cbc9;
	width: 100%;
	height: 80px;
	float: left;
	overflow: hidden;
}
.dingbu img{
	position: absolute;
	margin-top: 10px;
}

.dingbu .menu{
float: right;
margin-right: 50px;
margin-top: 30px;
}

.dingbu .menu ul li{
	float: left;
	list-style: none;
    margin-left: 20px;
    line-height: 80px;
    margin-top: -30px;

}
/* text-decoration: none;去掉超级链接的下划线 display将a标签设置为块级元素 */
.dingbu .menu ul li a{
	color: #fff;
	text-decoration: none;
	display: block;
	font-size: 20px;
	 padding: 0 10px;

}
/* 鼠标经过变黑色:hover{background-color: #000;}*/
.dingbu .menu ul li a:hover{
	background-color: #000;
}

/* banner区  */
.banner{
	width: 100%;
	height: 800px;
	float: left;
	background-color:black;
	overflow: hidden;
}


.banner img{
	width: 100%;
	height: 800px;
	position: absolute;
	 }

/* 表单位置设置 */
.banner .form{
	position: absolute;
margin-left: -180px;
left: 50%;
margin-top: -180px;
top: 50%;
line-height: 50px;

}

/* 表单 */
.banner .form .text1{
    width: 400px;
    height: 30px;
    background: transparent;
    border: 2px solid #fcfff9;
    outline: none;
}
/* 鼠标移动到边框变颜色 */
.banner .form .text1:hover{
    border-color:#07cbc9;
}

/* 多行表单 */
.banner .form .text2{
    margin-top: 20px;
    background: transparent;
    border: 2px solid #fcfff9;
}
/* 鼠标移动多行表单边框变色 */
.banner .form .text2:hover{
    border-color:#07cbc9;
}
 
 
/* 按钮 */
.banner .text3{
    background: transparent;
    width: 180px;
    height: 50px;
    margin-left: 30%;
    border: 2px solid #fcfff9;
    color: #fff;
}
/* 鼠标移动到按钮变色 */
.banner .text3:hover{
background-color: #07cbc9;
 
}



/* ABOUT区 */
.ABOUT {
	width: 100%;
	
   float: left;
   margin:0 auto;
   position: relative;


}
/* 标题居中 */
.ABOUT .biaoti{
	width: 100%;
	line-height: 30px;
	float: left;
	text-align: center;
}
/* 下划线 */
.ABOUT .border{
	width: 30px;
    height: 10px;
    border-bottom:2px solid #07cbc9;
    
    margin: auto;
	}
.ABOUT .img-pp3{
	float: left;
	width:100%;

	
	
}
.ABOUT .img-pp3 img{
	width: 840px;
	margin:80px auto;

 
}

昵称加载中__ 2019-09-22

源自：前端油画商城案例 4-3 项目作业

收起

1回答

好帮手慕小尤 2019-09-23 11:05:40

同学你好，为图片的父元素设置为固定宽度与定位并居中。代码如下：

 /* ABOUT区 */
/* 删除浮动 */
.ABOUT {
  width: 100%;
  margin:0 auto;
  position: relative;
}
/* 标题居中 */
.ABOUT .biaoti{
  width: 100%;
  line-height: 30px;
  float: left;
  text-align: center;
}
/* 下划线 */
.ABOUT .border{
  width: 30px;
  height: 10px;
  border-bottom:2px solid #07cbc9;
  margin: auto;
}
/* 删除浮动 设置为固定宽度与相对定位 并居中*/
.ABOUT .img-pp3{
    width:1500px; 
    position: relative;
    margin:auto;
}
/* 为图片设置为块元素并设置居中 */
.ABOUT .img-pp3 img{
  display:block;
  margin:auto;
}

祝学习愉快！

收起回答