在导航栏中居中字形图标答案

【问题标题】：Centering glyphicon in navbar在导航栏中居中字形图标
【发布时间】：2015-03-02 20:09:00
【问题描述】：

我正在尝试将我的字形图标（及其文本）移动到导航栏的中间，并在您缩小窗口时使其保持居中和响应。而且我不希望它在窗口被塞满时挤在一起，而且我不希望下拉菜单偏向一侧或任何东西（因为提供的解决方案之一就是这样做的，这不是很好)。

看过很多 stackexchange 解决方案，例如：

How do I center Glyphicons horizontally using Twitter Bootstrap

how do i get glyphicon in the center of the bootstrap navbar?

但它们没有帮助，我尝试修改它们但无济于事。

这是特别是字形图标和按钮所在的部分：

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                    <span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
                </button>

这是完整的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Twenty Eight Interiors</title>
    <meta name="description" content="Twenty Eight Interiors">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

</head>
<body>
<!-- Navbar -->
    <nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
        <div class="container">
            <div class="navbar-header" id="oneDiv">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                    <span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
                </button>


            </div><!-- Navbar Header -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav" id="firstOne">
                    <li><a href="#" id="designProcess" role="button" id="designProcess">Design Process</a></li>
                    <li><a href="#" id="profile" role="button" id="profile">Profile</a></li>
                    <li><a href="#" id="contactInfo" role="button" id="contactInfo">Contact Info</a></li>
                </ul>
                <ul class="list-inline" id="secondOne">
                    <li><a href="http://www.facebook.com/" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
                    <li><a href="http://www.twitter.com/" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
                    <li><a href="http://www.instagram.com/" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
                </ul>
            </div>
        </div><!-- End Container img src="twitter.png"-->
    </nav><!-- End navbar -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>

有谁知道我如何摆脱这个差距？：

编辑：CSS

        <style type="text/css">
    #my-navbar{
        background:rgba(0,0,0,0.9);
        margin-bottom:0;
    }

    ul#firstOne{
        background-color:rgba(48, 50, 50, 0.5);
        padding: 20px;
    }
    ul#secondOne{
        padding: 5px;
    }
    </style>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

navbar-toggle 类将您的元素浮动到右侧。您可以通过移除浮动、将元素设置为 display: block 并将左右边距设置为 auto 来使按钮居中。

.navbar-toggle {
   float: none;
   display: block;
   margin: 8px auto;
}

请看这里：http://jsfiddle.net/keithburgie/amysg7ru/

【讨论】：

现场，谢谢一堆！ :D 你也碰巧知道如何解决gap这个问题吗？
您是否在我的 Fiddle 中看到了同样的差距？在您的屏幕截图中看起来有所不同。
不是在小提琴，这是因为我已经剃掉了一些 CSS，我也会把它放进去，等一下......在那里，添加它。
好的，所以这个差距总是存在的，你只是看到它，因为你正在改变
标记为答案，你太棒了！！ :)