10

我遇到了一个奇怪的问题。我使用 DIV 作为容器，并将图像放入此 DIV。我希望这张图片垂直对齐到底部。以下代码有效。

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

但是，如果我将 css 代码“位置：相对”更改为“位置：绝对”，则图像无法再与底部对齐。这是Firefox3的错误吗？我怎么解决这个问题？

我目前的解决方案是：

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

但我不喜欢这个解决方案。

4

2 回答 2

8

简短的回答：改变

top: 60px;

到

bottom: 60px;

长答案：

该声明position: absolute将您的元素从它所在的任何地方取出，并将其相对于未声明为静态的最里面的元素放置。In 不再参与任何其他元素的对齐，因此它不再用作表格单元（声明无效）。此外，声明如top: 10px意味着将其放置在距包含元素顶部那么远的地方。

将元素position: relative声明为诸如top: 10px“将元素从当前位置的顶部移动 10px”之类的声明。相对于声明的元素可能与其他元素重叠，尽管您应该记住原始位置仍然决定其他元素的排列。

我希望这能回答你的问题。

于 2009-10-22T18:25:21.120 回答
2

您也可以尝试设置一个位置：相对；容器，它使横幅（#banner 位置：相对；和 img 位置：绝对）然后将绝对位置设置为底部：0，将其与容器底部对齐。如果是整个页面，只需将容器的宽度和高度设置为 100%，并在 body 或 div 上删除多余的 padding/margin。

于 2009-10-22T18:51:18.733 回答