Html 导航栏菜单中文本上方的图标

我想在我的网站上制作一个菜单，它下面会有一个带有文本的图标，当我添加文本时，它会移到右边，并将末尾按下

带有图标且无文本的导航栏

带文本的导航栏（关闭最后一个li）

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@导入url（'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.adminNavigation{
宽度：100%；
高度：80px；
背景色：#ebebebeb；
边界半径：3px；
}
.adminNavOptions{
显示：表格；
保证金：0自动；
线高：80px；
}
李国章先生{
显示：内联块；
右边填充：62px；
左侧填充：62px；
}
.adminNavOptions li:悬停{
背景色：#000；
}

试验
试验
试验
试验
试验
试验

试试这个：

.adminNavigation

• 删除

  显示：表格

• 为

  padding left

  属性指定零值

.adminNavOptions li

• 使用

  显示：块；浮动：左而不是
  显示：内联块

• 使用

  文本对齐：居中；宽度：16.666.7%而不是
  右填充：62px；左侧填充：62px

图标

• 的内容通过

  行高

  属性垂直对齐。因此，如果需要在文本上方放置图标，还需要更改
  的属性。为此，我添加了

  .iconAbove

  类
• 如果将图标保留在文本左侧，则可以通过

  position:relative；顶部：9px

：悬停

• 对文本使用对比度颜色
• 为第一个和最后一个设置边界半径属性

请检查结果：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@导入url（'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.adminNavigation{
高度：80px；
背景色：#ebebebeb；
边界半径：3px；
}
.adminNavOptions{
保证金：0；
线高：80px；
左侧填充：0；
}
.adminNavOptions.fa{
位置：相对位置；
顶部：9px；
}
.adminNavOptions.iconAbove{
高度：80px；
线高：正常；
填充顶部：11px；
}
.adminNavOptions.iconAbove.fa{
显示：块；
位置：静态；
}
李国章先生{
显示：块；
浮动：左；
文本对齐：居中；
宽度：16.666.7%；
}
.adminNavOptions li:悬停{
背景色：#000；
颜色：#fff；
}
.adminNavOptions li:第一个子项：悬停{
边界半径：3px 0 3px；
}
.adminNavOptions li:最后一个子项：悬停{
边界半径：0 3px 3px 0；
}

测试
试验
试验
试验
试验
试验

试试

.adminNavOptions.fa{display:block；}

谢谢你的深入回答，它看起来好多了，但是如果你看到我的编辑，我有一些问题。我设法对它进行了排序，它正在编辑

的宽度。adminNavOptions li

@Kieron606你需要什么样的垂直对齐？