0

我想在我的页脚图片上有一个版权文本，所以我做了一个 ID 为“copyright”的段落。这是在我的 css 文件中：

.footer {
background: url(../images/footer_extend.png) repeat-x center;
overflow: hidden;
 }
.footer img {
    display:block;
    margin:0px auto;
    max-width:970px;
    height: 130px;
    overflow: hidden;
}
#copyright{
position:absolute;
color:#000;
bottom:1px;
left:46%;
}

所以文本应该居中，白色并且在页面的最底部。但对我来说，文本位于页面中间（而不是底部）。为什么以及如何解决这个问题？

哦，这是我的html文件：

<div class="footer">
    <img src="images/footer.png" width="970" height="130" alt="" />
    <p id="copyright">© 2013</p>
</div>
4

2 回答 2

3

您可能想要添加position: relative到 .footer

于 2013-10-10T19:51:48.760 回答
1

为了相对于div#copyright绝对定位div.footer，div.footer需要相对定位。

默认情况下，div 是静态定位的，因此您需要明确指定相对位置：

.footer {
    position:relative;
    background: url(../images/footer_extend.png) repeat-x center;
    overflow: hidden;
}

下面的工作示例： 

.footer {
  position: relative;
  background: url(../images/footer_extend.png) repeat-x center;
  overflow: hidden;
}

.footer img {
  display: block;
  margin: 0px auto;
  max-width: 970px;
  height: 130px;
  overflow: hidden;
}

#copyright {
  position: absolute;
  color: #000;
  bottom: 1px;
  left: 46%;
}
<div class="footer">
  <img src="images/footer.png" width="970" height="130" alt="" />
  <p id="copyright">© 2013</p>
</div>

在 JSFiddle 上查看

于 2013-10-10T19:53:59.373 回答