无法找到CSS垂直对齐的解决方案为Firefox

DIV垂直对齐问题的HTML代码是：

<div class="mess"><div class="rpl"><img src="img/16.png" width="16" height="16" border="0"></div><div class="pic"><img src="img/1.png" width="100" height="100" border="0"></div></div>

的CSS是这样的：

.mess{ float:left; width:658px; border-top:1px solid #CCC;padding-top:5px; } 
.rpl{ position: relative;width:19px; float:left;top: 20%;display: table-cell; vertical- align: middle; padding-top:20px; } 
.pic{width:100px; float:left; padding-bottom:5px;margin-right:10px; }

我试图把“rpl”DIV放在“混乱”DIV的垂直中间。在IE中它看起来不错，但我无法正确的在Firefox中（始终在“mess”div的顶部）

我尝试使用display：inline，display：table-cell for“rpl”DIV但在FF中没有效果。

是否有任何解决方案垂直对齐的DIV在FF？

来源

2010-03-28 Sergio

.pic应该在哪里结束。你有.rpl和.pic漂浮在.mess里面。它们将互相显示在一起。 – 2010-03-28 17:51:05

要垂直对齐一个div，你需要做的几个步骤

给这个div容器相同的高度和行高。
给集装箱分区保证金：汽车（您可以给任何价值的保证金左和保证金右，保证金顶部和保证金底部需要自动为此工作）。

说明：给予margin-top和bottom作为auto将边缘平均分配给顶部和底部。线高和高度相同时，它显示为垂直对齐。

希望它有帮助

来源

2010-03-29 20:39:44 ssingh3

无法找到CSS垂直对齐的解决方案为Firefox

回答

相关问题