我遇到了一个奇怪的问题。我使用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的bug吗？我怎么解决这个问题？
我目前的解决方案是：
<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>
但我不喜欢这个解决方案。
简短回答：
改变
top: 60px;
to
bottom: 60px;
长答案：
声明position: absolute将元素从其所在位置取出，并将其相对于未声明为静态的最内部元素放置。不再参与任何其他元素的对齐，因此它不再充当表格单元格（声明无效）。此外，声明如top: 10px意味着将其放置在距包含元素顶部一定距离的位置。
将一个元素声明为position: relative做出声明，例如top: 10px表示“将元素从当前位置顶部移动 10px”。尽管您应该记住，原始位置仍然决定其他元素的排列，但相对于其他元素重叠声明的元素是可能的。
我希望这能回答你的问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
