根据文本换行和窗口宽度（Jquery 或 JavaScript）更改 CSS 类

Question

我有一个带有一些文本列的响应式设计。列有 h2 标题，并且浮动到标题左侧的是图像图标 - 很好地垂直居中于标题文本。当我缩小窗口宽度时会出现问题。当单标题线换行时，它们不再与图标垂直对齐。

基本上，我正在尝试编写一个脚本，告诉标题的类在它换成两行时发生变化，以便我可以将它的垂直位置更改为居中。

我真的是脚本新手，所以我不确定如何编写它，但本质上就是这样：

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

有人可以帮我正确格式化吗？我已经将 jQuery 用于其他一些东西，所以如果可以使用它，那就太好了。

谢谢！

编辑：其中最重要的部分是当一行从 1 行换成 2 行时更改类属性。这是关键部分：

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

你能不把背景图片的垂直位置设置为50%吗？而不是将 js 添加到一个相对较小的外观变化中。

Answer 2

无需 JavaScript（包括 jQuery），使用纯 CSS：http://www.css3.info/preview/media-queries/。

可以在http://css-tricks.com/css-media-queries/找到更详细的解释

Answer 3

我不确定“and if 文本行”，但 AND 的左侧是：

-EDIT-我明白了，看看这是不是你想要的。

$(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')
          }
     }

});