Html 将引导图示符图标堆叠并居中放置在列表项中文本的顶部。将引导图示符图标堆叠并居中放置在列表项中文本的顶部

我在引导中有一个列表项，它在无序列表项中使用了2个span标记

我希望垂直和水平居中，然后将glyphicon堆叠在列表项中文本的上方

另外保留文字装饰：无；处于活动状态和悬停状态

如何为此创建css3

<nav>
<ul>
  <li>
   <link href="#" title="HOME">
<span class="glyphicon glyphicon-globe"></span>

<span class="glyphicon-class">about</span>

   </link>
  </li>
</ul>
</nav>

关于


span类创建一个内联元素。如果希望使用span class，请在第一个span class之后添加一个

，以便创建新行

<nav>
    <ul>
      <li>
        <link href="#" title="HOME">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">about</span>
       </link>
      </li>
    </ul>
    </nav>

要针对悬停动作或活动，您可以编写如下css

nav li:hover {
text-decoration: none;
}

nav li:active {
text-decoration: none;
} 

伟大的成功了。我的文本链接顶部的Glyphicon，两者都居中。因此，使用css，如何控制导航中的glyphicon和链接文本之间的间距？br标签在两者之间放置了大量的空间。
nav li:hover {
text-decoration: none;
}

nav li:active {
text-decoration: none;
}