0

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?

Sergio
  • 1,207
  • 7
  • 28
  • 42
  • Where is the .pic supposed to end up. You have .rpl and .pic floated inside of .mess. They will display inline with each other. – Dustin Laine Mar 28 '10 at 17:51

1 Answers1

1

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

ssingh3
  • 125
  • 1
  • 8