中心对齐导航栏中的文本与glyphicon

Question

我正在创建一个导航菜单，发现难以居中对齐glyphyicon下的文本。这是我的代码如下。不确定我是否做得对。它需要像预期的导航栏

<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>

当前导航栏

预期的Navbar

Answer 1

只需在UL getFxRate: { method: 'GET', isArray: false, url: '/api/emissions/getfxrate', transformResponse: function (data) { return { fxRate: data }; } } 中使用text-center：

navbar

http://www.bootply.com/xuzJVpzuat

Answer 2

也许你可以尝试这样做，它对我有用！

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

您可以在工作小提琴中查看代码：HERE