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

Question

我的图标菜单看起来像，

图标显示在文本标题的稍上方。我阅读了此处给出的提示，以使用 vertical-align。而在同时指定line-height和vertical-align之后，它没有任何效果。

Plunker 代码是 here。

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

Answer 1

您的图标是 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 2

尝试通过 background-position 属性将 em 元素中的图标居中，这应该使它们居中，就像您的标题文本一样并正确对齐（以前它们是位于 top-left 角）：

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

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

Answer 3

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

的值

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

Image icons are not vertically aligned with menu caption

css

background-image