Center Ausrichten von Text in Navbar in Bezug auf Glyphon

Question

Ich erstelle ein Nav-Menü und finde es schwierig Mitte Ausrichtung des Textes unter dem Glyphyon. Hier ist mein Code unten. Nicht sicher, ob ich die Dinge richtig mache. Es muss wie die erwartete navbar

<ul class="nav navbar-nav navbar-right"> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Country <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
          </ul> 
         </li> 
         <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
        </ul> 

Aktuelle Nav bar

Erwartet Navbar

Answer 1

Gerade text-center in der UL verwenden navbar:

<ul class="nav navbar-nav text-center"> 
    <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
    <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
    <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
    <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Country <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </li> 
    <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
</ul> 

http://www.bootply.com/xuzJVpzuat

Answer 2

Vielleicht können Sie sein versuchen, dies zu tun, Für mich geht das !

<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div> 

Sie können den Code in einer Arbeits Geige überprüfen: HERE