Question

I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.

img div has image inside. What I want is

if image is height and width 100px than its not vertical-align:middle. Help please.

Tested with vertical-align:middle

CSS

.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}

HTML

<div class="mainbox-area">
        <!-- Box start v1 -->
        <div class="ver-mainbox">                                                   
            <h2>Immunizations</h2>
            <div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
        </div>                                                
        <!-- Box start v1 -->                                                               
</div>

Answer 1

vertical-align is only applicable to table cells. You’ll need to rethink how you go about this or use the display:table-* properties.

   <div style="display:table">                                               
        <h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
        <div style="display:table-cell;vertical-align:middle">
            <img src="../../Content/images/v1.gif" alt="" title="" />
        </div>
   </div>