堆栈和中心Bootstrap Glyphicon在列表项中的文本顶部。堆栈和中心Bootstrap Glyphicon在列表项中的文本顶部

Question

我在Bootstrap中有一个列表项，它在无序列表项中使用了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>

Answer 1

span类创建内联元素。如果您希望使用span类，请在第一个span类之后添加<br>，以便创建一个新行。

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

添加display：inline-block;作为样式属性将水平显示内容。将其添加到css中Nav的<li>元素中。我猜每个<li>可能都有一个字形。在css导航中的<li>上添加text-align：center，以便在中间对齐<li>的内容。

nav li {
display: inline-block;
text-align:center;
text-decoration: none;
}

要定位悬停操作或活动，您可以编写如下的CSS。

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

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