javascript - 根据文本换行和窗口宽度更改 CSS 类(Jquery 或 JavaScript)

Question

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

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

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

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 添加到相对较小的外观更改中。