Question

我在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中得到它（总是在“混乱”div的顶部）

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

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

Answer 1

要垂直对齐div，您需要执行几个步骤

给容器div 相同的高度和行高。
给容器div margin：auto （你可以为margin-left和margin-right赋予任何值.margin-top和margin-bottom需要为auto才能工作）。< / LI>
说明：给予margin-top和bottom作为自动将边距平均分配到顶部和底部。线高和高度相同，它显示为垂直对齐。

希望有所帮助

无法找到适用于Firefox的CSS垂直对齐解决方案

1 个答案: