Question

我遇到了一个奇怪的问题。我使用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代码“position：relative”更改为“position：absolute”，则图像无法再与底部对齐。这是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>

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

Answer 1

简短回答：变化

top: 60px;

到

bottom: 60px;

答案很长：

声明position: absolute从任何地方取出你的元素，并将它放在相对于未声明为静态的最内层元素的位置。不再参与任何其他元素的对齐，因此它不再用作表格单元格（声明无效）。此外，诸如top: 10px之类的声明意味着将它放置在距离包含元素顶部很远的位置。

将元素声明为position: relative使得top: 10px等声明意味着'从当前位置移动元素10px'。声明的元素可能与其他元素重叠，但您应该记住原始位置仍然决定了其他元素的排列。

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

Answer 2

您也可以尝试设置一个位置：relative;容器，它使横幅（#banner位置：相对;和img位置：绝对）然后将绝对位置设置为底部：0，将其对齐到容器的底部。如果它是整个页面，只需将容器的宽度和高度设置为100％，并删除主体或div上的额外填充/边距。

当“position：absolute”时为什么“display：table-cell”被破坏

2 个答案: