Can't find solution for CSS vertical align for Firefox

Posted by Sergio on Stack Overflow See other posts from Stack Overflow or by Sergio
Published on 2010-03-28T17:38:05Z Indexed on 2010/03/28 17:43 UTC
Read the original article Hit count: 339

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about css

Related posts about html