0

フッター画像の上に著作権テキストを表示したいので、「copyright」という ID の段落を作成しました。これは私の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 に答える