Question

我试图将我的glyphicon（及其文本）移动到导航栏的中间，并使其保持居中并在向下缩小窗口时进行响应。当窗口被挤满时，我不希望它一起揉搓，我不希望下拉菜单偏向一边或任何东西（因为其中一个提供的解决方案就是这样做的，这不是＆＃39;非常好。）

已经查看了很多stackexchange解决方案，例如：

How do I center Glyphicons horizontally using Twitter Bootstrap

Center align "span" text inside a div

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

但他们没有帮助，我尝试修改它们但没有用。

这是一个特别是glyphicon和按钮所在的部分：

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

有谁知道我如何摆脱这个差距？： enter image description here

编辑：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

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

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

见这里：http://jsfiddle.net/keithburgie/amysg7ru/

在导航栏中居中glyphicon

1 个答案: