老师 咋样把about中的图片 居中显示
来源：2-10 作业题
白衣参上
2019-05-07 18:16:17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: Microsoft YaHei UI;
}
.head{
width: 100%;
height: 80px;
position: fixed;
top: 0;
background-color: #07cbc9;
overflow: hidden;
zoom:1;
display: block;
}
.head .logo{
width: 260px;
height: 48px;
position: relative;
top: 16px;
float: left;
}
.daohan ul{
height: 80px;
list-style: none;
float: right;
margin-right: 50px;
}
.head .daohan li{
float: left;
color: white;
margin-left: 50px;
line-height: 80px;
}
.banner{
margin-top: 80px;
width: 100%;
height: 500px;
}
.banner img{
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
z-index: 1;
}
.banner .regin{
width: 509px;
height: 391px;
text-align: center;
position: absolute;
top: 135px;
left: 50%;
margin-left: -254px;
z-index: 2;
}
.regin .text{
border: 2px;
border-style: solid;
width: 505px;
height: 39px;
border-color:white;
margin-top: 20px;
background: none;
}
.regin .textarea{
border: 2px;
border-style: solid;
border-color: white;
width: 505px;
height: 115px;
margin-top: 20px;
background: none;
}
.regin .button{
border: 2px;
border-style: solid;
border-color: white;
width: 123px;
height: 39px;
margin-top: 20px;
background: none;
}
.about{
text-align: center;
width: 100%;
height: 600px;
min-width: 700px;
overflow: hidden;
zoom:1;
}
.about .top h1{
position: relative;
margin-top: 40px;
}
.about hr{
width: 30px;
border-color:#07cbc9;
}
.about .top hr{
position: relative;
left: 50%;
margin-left: -15px;
margin-top: 10px;
margin-bottom: 10px;
}
.about .top p{
color: #C0C0C0;
margin-bottom: 20px;
}
.about .aboutmid{
width:100%;
margin:0 auto;
position:relative;
margin-top:20px;
}
.about .aboutmid .left{
width:240px;
height:400px;
float:left;
position:absolute;
left:200px;
}
.about .aboutmid .left .word{
width:300px;
height:230px;
line-height:28px;
border:1px solid #ccc;
background:rgba(255,255,255,0.5);
}
.about .aboutmid .left .word button{
text-align:center;
color:white;
background:black;
width:102px;
height:45px;
border:1px solid #000;
}
.about .aboutmid .middle{
left: 200px;
width:600px;
height:400px;
float: left;
}
.about .aboutmid .middle img{
width:568px;height:380px;}
.about .aboutmid .right{
width:240px;
height:350px;
float:left;
}
.right .student,.right .faculty{
border:1px solid #07cbc9;
margin-top:20px;
padding-top:15px;
text-align:center;
width:238px;
height:144px;
line-height:72px;
}
</style>
</head>
<body>
<div class="all">
<div class="head">
<div class="logo">
<img src="images/logo.png"></div>
<div class="daohan">
<ul>
<li>CONTACT</li>
<li>EVENTS</li>
<li>FACULTY</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg">
<div class="regin">
<form>
<tr><input type="text" class="text" name="one" placeholder="your Name"> </tr>
<br/>
<tr><input type="text" class="text" name="two" placeholder="your Phone"></tr>
<br/>
<tr><input type="text" class="text" name="three" placeholder="your Email"></tr>
<br/>
<tr><textarea class="textarea" name="textarea" placeholder="Write your Commeat here"></textarea></tr>
<br/>
<tr><button class="button">SEND MESSAGE </button></tr>
</form>
</div>
</div>
<div class="about">
<div class="top">
<h1>ABOUT</h1>
<hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</br> industry.Lorem Ipsum has been the indsustry's standard dummy </br>text ever since the 1500s.</p>
</div>
<div class="aboutmid">
<div class="left">
<h2>A WORD</br/>ABOUT US</h2>
<div class="word">
<p>Praesent dignissim viverra est,sed</br>bibendum ligula congue non,Sed ac nisl</br>et felis gravida commodo?Suspendisse</br>eget ullamcorper ipsum.Suspendisse</br> diam amet.</p>
<div><button>EXPLORE</button></div>
</div>
</div>
<div class="middle">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="student">
<h2>70000</h2><hr><p>Students</p>
</div>
<div class="faculty">
<h2>600</h2>
<hr>
<p>Faculty</p>
</div>
</div>
</div>
<div class="gallery"></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
1回答
-
同学你好！
这里给你一个思路，不同给中间图片居中，而是使三部分内容居中：
设置一个大的div，然后设置这个div居中，注意这里的宽度要和GALLERY区的宽度一致，建议设置为1000px左右，里面3个小的div，设置浮动使显示在一行。
最后在设置一个div容纳遮罩的这部分，并使用绝对定位，要相对于上面说到的大div。
具体该填充多少值可以参考原型图。
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题