無法找到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

回答

相關問題