网页布局2-9作业：about的图片怎么居中显示？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>career builder</title>
<link rel="stylesheet" href="..\css\网页布局2-9作业题.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="logo">
<img src="..\images\网页布局2-9作业题\logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>HPME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!-- 中部 -->
<div class="main">
<!-- banner -->
<div class="banner">
<div class="banner-jpg">
<img src="..\images\网页布局2-9作业题\banner3.jpg" alt="jpg">
</div>
<!-- 遮罩层 -->
<div class="toplayer">
<div class="toplayer-top">
<form action=" " name="your-information"> <!-- form提交路径-->
<table>
<tr>
<td><input type="text" placeholder="your Name"></td>
</tr>
<tr>
<td><input type="text" maxlength="11" placeholder="your Phone" oninput="value=value.replace(/[^\d]/g,'')"></td>
</tr>
<tr>
<td><input type="email" placeholder="your Email"></td>
</tr>
<tr>
<td><textarea placeholder="Write Your Comment Here"></textarea>
</tr>
<tr>
<td><button type="submit" form="your-information">SEND MASSAGE</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<!-- ABOUT区 -->
<div class="ABOUT">
<div class="about-top">
<div class="title">ABOUT</div>
<label class="line"></label>
<div class="word">
Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem Ipsum has been the industry's standerd dummy<br>text ever since the 1500s.
</div>
</div>
<div class="jpg-left">
<div class="title">A WORD <br> ABOUT US</div>
<div class="content">
<div class="word">
Praesent dignissim viverra est, sed<br>bibendum ligula congue non, Sed ac nisl<br>et felis gravida commodo? Supendisse<br>egent ultamcorper ipsum. Supendisse<br>diam amet.
</div>
<a href=""><button>EXPLORE</button></a>
</div>
</div>
<div class="jpg">
<img src="..\images\网页布局2-9作业题\bb3.jpg" alt="">
</div>
<div class="jpg-right">
<div>
<div>70000</div>
<label class="line"></label>
<div>students</div>
</div>
<div>
<div>600</div>
<label class="line"></label>
<div>Faculty</div>
</div>
</div>
</div>
</div>
</body>
</html>
--------------------------------------
*{
padding: 0;
margin: 0;
}
/*下面为头部样式*/
.header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
.header .logo {
margin-left: 150px;
float: left;
margin-top: 16px;
}
.header .nav{
float: right;
color: #ffffff;
}
.header .nav{
margin-right: 50px;
}
.header .nav ul li{
list-style: none;
float: left;
line-height: 80px;
margin-right: 30px;
font-weight: bold;
}
/*下面为banner区*/
.main .banner img{
width: 100%;
height: 800px;
}
.main .banner .toplayer{ /*遮罩层*/
position: absolute;
top: 80px;/*距离头部的距离*/
left: 0;
width: 100%;
height: 800px;
background-color: rgba(0,0,0,0.5);
}
.main .banner .toplayer .toplayer-top{ /*设置内容居中*/
width: 600px;
height: 400px;
position: absolute;
/*background-color: blue;*/
top: 400px;/*不包括头部的高度，遮罩层高度的一半*/
margin-top: -200px;
right: 50%;/*遮罩层宽度的一半*/
margin-right: -300px;
z-index: 2;
}
.main .banner .toplayer .toplayer-top form {
width: 600px;/*设置宽和高toplayer-top一样*/
height: 400px;
margin-left: 50px;
}
.main .banner .toplayer .toplayer-top input{
width:500px;
height: 40px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: #ffffff;
}
.main .banner .toplayer .toplayer-top textarea{
resize: none;
width: 500px;
height: 100px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: #ffffff;
}
.main .banner .toplayer .toplayer-top button{
width: 100px;
height: 40px;
margin-left: 200px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: gray;
}
/*下面为ABOUT区*/
.main .ABOUT{
width: 100%;
height: 800px;
}
.main .ABOUT ..about-top{
width: 100%;
height: 300px;
}
.main .ABOUT .about-top .title{
text-align: center;
font-family: "微软雅黑";
font-size: 60px;
font-weight: bold;
margin-top:30px;
}
.main .ABOUT .about-top .line{
background-color: #07cbc9;
display: block;
width: 40px;
height: 2px;
margin:15px auto;
}
.main .ABOUT .about-top .word{
text-align: center;
color: gray;
margin-bottom: 30px;
}
.main .ABOUT .jpg-left{
float: left;
width: 33.3%;
}
.main .ABOUT .jpg-left .title{
font-size: 40px;
}
.main .ABOUT .jpg-left .content{
border: 2px #ccc solid;
width: 350px;
height: 200px;
padding: 20px 15px;
}
.main .ABOUT .jpg-left button{
margin-top: 20px;
width: 80px;
height: 50px;
}
.main .ABOUT .jpg{
float: left;
width: 33.3%;
}
.main .ABOUT .jpg-rgiht{
float: right;
width: 33.3%;
}
正在回答
您好，按F12查看名为jpg的div的大小，可以发现div的宽度是小于图片的，所以导致有一部分图片是在div的外部的。可以设置图片的宽度为100%，这样就会居中显示了。
.jpg img{
width:100%;
}祝学习愉快！
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星