为什么＆＃8220;显示：table-cell＆＃8221;当＆＃8220;位置：绝对＆＃8221;

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”，为了“位置：绝对”，图像不能再与底部对齐。这是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 将你的元素从任何地方取出，并将它放在相对于未声明为static的最内层元素的位置。不再参与任何其他元素的对齐，因此它不再用作表格单元格（声明无效）。此外，诸如 top：10px 之类的声明意味着将它放置在距离包含元素顶部很远的位置。

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

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

Answer 2

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