在导航栏中居中的glyphicon

Question

I'm trying to move my glyphicon(with its text) into the middle of the navbar and make it stay centered and responsive when you thin the window down. 我正在尝试将glyphicon（及其文字）移动到导航栏的中间，并在您缩小窗口时使其保持居中并响应。 And I don't want it to scrunch together when the window is crammed, and I don't want the dropdown menu to go off to one side or anything(since one of the offered solutions did just that, which wasn't very nice). 而且我不希望它在窗口被塞满时一起皱缩，也不希望下拉菜单切换到一侧或其他任何位置（因为所提供的解决方案之一就是这样做的，这不是很好））。

Have looked at lots of stackexchange solutions, such as the following: 研究了很多stackexchange解决方案，例如：

How do I center Glyphicons horizontally using Twitter Bootstrap 如何使用Twitter Bootstrap将Glyphicons水平居中

Center align "span" text inside a div 在div中居中对齐“ span”文本

how do i get glyphicon in the center of the bootstrap navbar? 我如何在引导导航栏的中央获取glyphicon？

But they didn't help, I tried modifying them a bit but to no avail. 但是它们并没有帮助，我尝试了一下修改但无济于事。

This is the piece in particular where the glyphicon and button is: 这是glyphicon和button所在的部分：

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

Here's the entire code: 这是完整的代码：

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

And does anyone know how I get rid of this gap?: 有谁知道我如何摆脱这种差距？： 在此处输入图片说明

EDIT: The CSS 编辑：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>

Answer 1

The navbar-toggle class floats your element to the right. navbar-toggle类将您的元素向右浮动。 You can center your button by removing the float, setting the element to display: block, and setting the left and right margin to auto. 您可以通过以下方式将按钮居中：移除浮点，将元素设置为显示：块，并将左右边距设置为自动。

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

See here: http://jsfiddle.net/keithburgie/amysg7ru/ 看到这里： http : //jsfiddle.net/keithburgie/amysg7ru/

在导航栏中居中的glyphicon

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-02 11:56:27

在导航栏中居中的glyphicon

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-02 11:56:27

解决方案1
1 已采纳 2015-03-02 11:56:27