Изображение не выровнено по вертикали: среднее

Question

У меня есть 1 div div h2 и изображение в div с классом img. h2 - это float: left и img float: right.

img div имеет изображение внутри. То, что я хочу, это

если изображение имеет высоту и ширину 100 пикселей, а не выравнивание по вертикали: среднее . Помогите пожалуйста.

Проверено с выравниванием по вертикали: среднее

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 применимо только к ячейкам таблицы.Вам нужно переосмыслить то, как вы это делаете, или использовать свойства display:table-*.

   <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>