向下移动一个容器时都移动

时间:2012-07-24 15:15:18

标签: html css

所以我在一个名为main的容器中有一个名为banner的容器,如下所示:

<div id="main"> <!-- BEGIN MAIN -->
<div id="banner"> <!-- BEGIN BANNER -->
</div> <!-- END BANNER -->
</div> <!-- END MAIN -->

主要是渐变,横幅是我希望在渐变中间有一种横幅。左右自动效果很好。但是当我尝试在横幅顶部放置10px的边距时,主横幅和横幅都向下移动。我怎么做到这样只有横幅向下移动?非常感谢!

#main {

width: 1200px;
height: 440px;
background-image: url(../website/images/background_bg.png);

}

#banner {

width: 966px;
height: 367px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-image: url(../website/images/banner.png);

}

2 个答案:

答案 0 :(得分:0)

在#main中添加10px的padding-top,它将解决问题。

所以你将拥有: #main { padding-top: 10px; ... }

答案 1 :(得分:0)

不应使用margin-top,而应使用:

vertical-align: middle;

像这样,#banner将始终位于另一个容器的中间,而无需指定margin-topmargin-bottom