图像图标与菜单标题不垂直对齐

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以及下面的示例;

Answer 2

您的图标是50px方形元素上的背景图像。只需将背景设置为居中

即可

 em[class^='icon-'] {
   display: inline-block;
   height: 50px;
   width: 50px;
   background-repeat: no-repeat;
   vertical-align : middle;
   line-height:50px;
   background-position: center; /* <--- this part */
 }

Answer 3

你可以使用     a em {margin-top:10px;} 并查看何时需要图标并更改margin-top

的值