为什么＆QUOT;显示：表细胞QUOT;被打破的时候＆QUOT;位置：绝对＆QUOT; [英] Why "display: table-cell" is broken when "position: absolute"

问题描述

我遇到了一个奇怪的问题。我用DIV作为容器，并把一个图像插入此DIV。我想这个图像垂直对齐底部。下面code工作。

I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.

#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 code的位置是：相对到的位置是：绝对时，图像无法对齐底部了。这是Firefox3的一个错误？我该如何解决这个问题呢？

But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?

我目前的解决办法是：

<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>

但我不喜欢这样的解决方案。

But I do not like this solution.

推荐答案

简短的回答： 更改

top: 60px;

到

bottom: 60px;

的回答：

声明的位置是：绝对把你的元素从任何地方它，并把它相对于未声明为静态最里面的元素。在不再参与任何其它元件的取向，因此它不再担任表小区（声明没有作用）。此外，声明如顶：10px的表示将它从该包含元素的顶部

The declaration position: absolute takes your element out from wherever it is and place it relative to innermost element that is not declared static. In no longer participate in the alignment of any other element, hence it no longer serve as table-cell (the declaration has no effect). Additionally, declaration such as top: 10px means to place it that much distance from the top of that containing element.

声明元素为的位置是：相对作出的声明，如顶：10px的的意思是从移动元素10px的从当前位置的顶部。这是可能的声明相对与其他元素重叠的元素，但你应该记住，在原来的位置还是决定等元素的排列方式。

Declaring an element as position: relative makes declaration such as top: 10px means 'move the element 10px from the top from the current position'. It is possible for elements declared relative to overlap with other elements, although you should remember that the original position still determines the arrangement of other elements.

我希望这回答你的问题。

I hope this answer your question.

这篇关于为什么＆QUOT;显示：表细胞QUOT;被打破的时候＆QUOT;位置：绝对＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！