I have a problem with DIV vertical align in Firefox
The HTML code is:
<div class="mess"><div class="rpl"><i开发者_如何学运维mg 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?
To vertically align a div you will need to do couple of steps
- Give the container div same height and line-height.
- 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
精彩评论