1

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>
David Hall
  • 32,624
  • 10
  • 90
  • 127
Pirzada
  • 4,685
  • 18
  • 60
  • 113
  • 1
    Vertical align in CSS rarely does what you wish it would. Unless the container has a set `line-height` or is `display: table-cell`, vertical align only applies to the current line of text, not to its position within the container. Good examples here: http://css-tricks.com/2597-what-is-vertical-align/ – Marc B Jun 21 '11 at 03:52

1 Answers1

2

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>
SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • CSS is largely irrelevant to SEO unless you're hiding things. – SpliFF Jun 22 '11 at 09:41
  • @SpliFF, that's wrong. According to [CSS2 specifications](http://www.w3.org/TR/CSS2/visudet.html#line-height): *Applies to: inline-level and 'table-cell' elements* – feklee Apr 11 '12 at 21:46