麻烦老师帮我看一下
<!-- Gallery区域 -->
<div class="Gallery">
<!-- Gallery上半部分 -->
<div class="gallery-top">
<div class="gallery-header">
<h2>GALLERY</h2>
<div class="fengexian4"></div>
</div>
<div class="gallery-wenzi">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
</p>
<p>
industry. Lorem Ipsum has been the industry's standard dummy
</p>
<p>
text ever since the 1500s.
</p>
</div>
<!-- Gallery下半部分 -->
<div class="Gallery2">
<div class="all">
<dl>
<dt><img src="images/03-01.jpg" alt=""></dt>
<dd><span>Science Lab</span></dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg" alt=""></dt>
<dd><span>ndoor Stadium</span></dd>
</dl>
<dl>
<dt><img src="images/03-03.jpg" alt=""></dt>
<dd><span>Transportation</span></dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg" alt=""></dt>
<dd><span>Kids Room</span></dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg" alt=""></dt>
<dd><span>Meditation Classes</span></dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg" alt=""></dt>
<dd><span>Kids Play Ground</span></dd>
</dl>
</div>
</div>
</div>
/* Gallery区域 */
.Gallery{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
/* Gallery上半部分 */
.Gallery .gallery-top{
width: 1200px;
text-align: center;
}
.Gallery .gallery-top .gallery-header h2{
font-size: 32px;
}
.Gallery .gallery-top .gallery-header .fengexian4{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 0 auto;
}
.Gallery .gallery-top .gallery-wenzi{
color: gray;
font-size: 14px;
}
/* Gallery 下半部分 */
.Gallery .Gallery2{
padding-top: 30px;
width: 1201px;
height: 653px;
/* 设置相对位置 */
position: relative;
background-color: orange;
}
/* 设置绝对位置 */
.Gallery .Gallery2 .all{
position: absolute;
width: 1200px;
height: 652px;
top: 50%;
left: 50%;
margin-top: -326px;
margin-left: -600px;
}
.Gallery .Gallery2 dl{
float: left;
margin-right: 40px;
margin-bottom: 30px;
width: 360px;
height: 290px;
}
.Gallery .Gallery2 dl img{
width: 360px;
height: 240px;
display: block;
}
.Gallery .Gallery2 dl dd{
width: 360px;
height: 50px;
background-color: black;
color: white;
float: left;
}
.Gallery .Gallery2 dl dd span{
float: left;
margin-left: 20px;
line-height: 50px;
}
相关截图:
问题描述:
老师你好,这六张图片还有文字怎么才能在橘色的盒子中垂直居中显示呢,我设置了“子绝父相”但是没反应,之前也设置了margin:0 auto;也没反应
12
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星