导航栏中文本上方/上方/上方的居中图标?(引导程序 3) [英] Centered icons above / over / on top of text in Navbar? (Bootstrap 3)

问题描述

我花了一些时间寻找一种方法来做到这一点&尝试了几个(关闭)示例但没有成功.

此处示例

我基本上是在尝试将小 android 图标放在子导航中Sub#"文本上方的中央.任何帮助，将不胜感激.代码区域为:

 <span>Sub1</span><i class="fa fa-android fa-lg"></i></span>

解决方案

你应该用 col-xs-offset-1 包裹 col-xs-2 中的每个图标code> 在第一个 div 中使其居中.您可以使用
标签在图标和文本之间创建换行符.

JSFiddle 演示

<i class="fa fa-android fa-lg"></i><br>子1
<div class="col-xs-2"><i class="fa fa-android fa-lg"></i><br>子2

<div class="col-xs-2"><i class="fa fa-android fa-lg"></i><br>子3

<div class="col-xs-2"><i class="fa fa-android fa-lg"></i><br>子4

<div class="col-xs-2"><i class="fa fa-android fa-lg"></i><br>子5

在您的原始代码中，您有一堆额外的 我不确定它们的用途是什么.我删除了那些.

I spent some time searching for a way to do this & tried a couple (close) examples without success.

Example here

I'm basically trying to put the little android icons centered above the "Sub#" text in the subnav. Any help would be appreciated. The area of the code is:

         <span class="">
         <span>Sub1</span>
         <i class="fa fa-android fa-lg"></i>
         </span>

解决方案

You should wrap each of icons in col-xs-2 with a col-xs-offset-1 in the first div to make it centered. You can use <br> tags to create a line break between your icon and your text.

JSFiddle Demo

<div class="col-xs-offset-1 col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub1
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub2
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub3
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub4
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub5
</div>

In your original code you have a bunch of extra <span>s I am not sure what purpose those are serving. I removed those.

这篇关于导航栏中文本上方/上方/上方的居中图标?(引导程序 3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！