Can't find solution for CSS vertical align for Firefox

Question

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?

Answer 1

To add to my comment, see this post: http://stackoverflow.com/questions/527811/css-vertical-centering

Good explanation demonstration of vertical centering in CSS without tables.

Answer 2

To vertically align a div you will need to do couple of steps

1. Give the container div same height and line-height.
2. Give the container div margin :auto ( you can give any value for margin-left and margin-right. margin-top and margin-bottom need to be auto for this to work).

Explanation: giving margin-top and bottom as auto ditributes the margins equally to top and bottom. With line-height and height same, it appears as vertically aligned.

hope it helps