Centered icons above / over / on top of text in Navbar? (Bootstrap 3)

问题

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>

回答1:

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.

回答2:

What worked for me was a simple br tag after the icon and "text-align: center" on "ul li a". Html:

<li><a href="#"><i class="fa fa-home"></i><br>Home page</a></li>

CSS:

ul li a {
    text-align: center;
}

回答3:

Something along those lines?

<span>Sub1</span>
  <span style='position:absolute;left:50%'>
    <span style='border:1px solid red;margin-left:-100%;'>
      <i class="fa fa-android fa-lg"></i>
    </span>
  </span>
</span>

来源：https://stackoverflow.com/questions/25330153/centered-icons-above-over-on-top-of-text-in-navbar-bootstrap-3