Can't find solution for CSS vertical align for Firefox
- by Sergio
I have a problem with DIV vertical align in Firefox
The HTML code is:
<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>
The CSS looks like:
.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; }
I'm trying to put "rpl" DIV at the vertical middle of the "mess" DIV.
In IE it looks fine but I can't get it right in Firefox (always at the top of the "mess" div)
I tried with display: inline,display: table-cell for "rpl" DIV but with no effect in FF.
Is there any solution for vertical align for DIV in FF?