麻烦老师帮我看一下

麻烦老师帮我看一下

<!-- 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;
}

相关截图:

http://img1.sycdn.imooc.com//climg/611204f40948fa3612700756.jpg

问题描述:

老师你好,这六张图片还有文字怎么才能在橘色的盒子中垂直居中显示呢,我设置了“子绝父相”但是没反应,之前也设置了margin:0 auto;也没反应

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕然然 2021-08-10 14:28:06

同学你好,给all盒子设置居中代码没有反应,是因为all盒子的宽度与外层父盒子(橘色盒子)的宽度几乎相等,是看不出居中效果的,如图

http://img1.sycdn.imooc.com//climg/611217f5093c4a2313470747.jpg

建议:将第三个和最后一个dl元素的margin-right设为0,此时all盒子的宽度设置为1160px,小于外层橘色盒子的宽度,然后再给all盒子设置margin: 0 auto就可以看出居中效果了,参考代码如下

http://img1.sycdn.imooc.com//climg/61121c1e09d8715108950736.jpg

祝学习愉快!

  • 提问者 以你为瘾丶 #1

    谢谢老师!!麻烦老师了!!

    2021-08-10 16:48:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师