根据文本换行和 window 宽度（Jquery 或 JavaScript）更改 CSS class

Question

I have a responsive design with some text columns. The columns have h2 headings and floated to the left of the headings are image icons - nicely vertically centered to the heading text. The problem occurs when I narrow the window width. When the single heading lines wrap, they are no longer vertically aligned to the icons.

Basically, I'm trying to write a script that tells the class of the heading to change when it wraps to two lines so that I can alter the vertical position of it to be centered.

I'm really new to scripting so I'm not sure how to write it but this is essentially it:

if window width > 768 and if lines of text in #services h2 = 1

#services h2 {
top:9px;
}

else

if window width > 768 and if lines of text in #services h2 > 1

#services h2 {
top:1px;
}

Could someone help me properly format this? I'm already using jQuery for some other stuff so if it's possible to do it with that, that would be great.

Thanks!

EDIT: The most important part of this is the changing of a class property when a line wraps from 1 line to 2. This is the critical part:

if lines of text in #services h2 = 1

#services h2 {
top:9px;
}

else

if lines of text in #services h2 > 1

#services h2 {
top:1px;
}

Answer 1

Could you not just set the vertical position of background image to be 50%? Rather than adding js to a relatively minor cosmetic change.

Answer 2

No JavaScript (includes jQuery) needed, use pure CSS: http://www.css3.info/preview/media-queries/ .

A longer explanation can be found at http://css-tricks.com/css-media-queries/

Answer 3

I am not sure about the 'and if lines of text' but the left side of the AND, would be:

-EDIT- I see, let see if this is what you want.

$(window).resize(function(){
     var h =$('#services h2').css('line-height');
     var size = $(window).width();
     if (size > 768){
          if( $('#services h2').height() == h){
                 $('#services h2').css('top','1px')
          }
     }else{
           if( $('#services h2').height() > 2*h){
                 $('#services h2').css('top','9px')
          }
     }

});