css - 图像图标未与菜单标题垂直对齐

Question

我的带有图标的菜单看起来像，

图标略高于文本标题。我阅读了此处给出的提示，以使用 vertical-align .并且在指定了 line-height 和 vertical-align 之后，它没有任何效果。

Plunker 代码是 here .

如何确保图标和文本项垂直对齐？

Answer 1

尝试通过 background-position 将图标置于 em 元素的中心属性，这应该使它们像您的标题文本一样居中并正确对齐(以前它们位于左上角):

em[class^='icon-'] {
   /* omitted for brevity */
   background-position: center; 
}

您可以 see an updated Plunker here以及下面的示例；